html - 如何使左侧div的内容与右侧div相撞？

Question

我需要强制左侧 div 的内容在找到它时在右侧流动。

.class1 {
  background-color: #678e6f;
  width: 80%;
  float: left;
}

.class2 {
  background-color: #00ff34;
  width: 300px;
  float: right;
}

<div class="class">
  <div class="class1">
    <img/><img/><img/>
  </div>
  <div class="class2">
    <li>text</li>
  </div>
</div>

但是当 div 发生碰撞时完全可以容忍

我需要这样的东西来传输所有元素。 http://htmlbook.ru/example/

有没有可能做这样的事情？

Answer 1

你的例子有很多问题，但如果你想让文本围绕右侧的图像(或任何 div)流动，它看起来或多或少像这样:

.classContainer {
   background-color: #678e6f;
}

.classFloat {
   background-color: #00ff34;
   width: 300px;
   float: right;
   margins: 10px; /* you probably want margins! */
}

然后是 HTML:

<div class="classContainer">
  <div class="classFloat">
    <img /> <!-- here is an image the text would flow around. -->
  </div>
  <p>Here is the material that will flow around the floating div.</p>
</div>

当然，文本和图像哪个并不重要；或者它们都可以是文本或都是图像。内容无关紧要。但是围绕文本流动的图像是不寻常的!