html - 如何以正确的方式用 div 装箱？

Question

我经常使用 div 来装箱信息，但我注意到包装箱有时可能不会填满空间，这会导致来自其他包装器的元素进入箱区域。

例如:

<div>
 <div style="length:150px;">my info1</div>
 <div style="length:50px;">my Info2</div>
</div>

看看这个例子

.topic {
  width: 500px;
  background-color: green;
  display: block;
}
.topic .tInfo {
  float: left;
  width: 460px;
  background-color: blue;
}
.topic .tName {
  width: 460px;
  background-color: brown;
}
.topic .tTime {
  width: 460px;
  background-color: lime;
}
.topic .tUImgLnk {
  width: 40px;
  height: 40px;
  float: left;
  position: relative;
  background: red;
}
.topic .tUImgLnk .tUImg {
  margin: 0px auto;
  display: block;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
}

<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>
<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>

我用过<br style="clear:both"/>在每个包装盒的末尾，但这真的是最好的方法吗？

Answer 1

发生这种情况是因为您没有包装器，并且元素是自由 float ；

在下面的代码片段中，我使用 article 选择器将您的元素包裹在行中并清除了 float :

.topic {
  width: 500px;
  background-color: green;
  display: block;
}
.topic .tInfo {
  float: left;
  width: 460px;
  background-color: blue;
}
.topic .tName {
  width: 460px;
  background-color: brown;
}
.topic .tTime {
  width: 460px;
  background-color: lime;
}
.topic .tUImgLnk {
  width: 40px;
  height: 40px;
  float: left;
  position: relative;
  background: red;
}
.topic .tUImgLnk .tUImg {
  margin: 0px auto;
  display: block;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
}
article:after {
  content: "";
  display: table;
  clear: both;
}

<article>
<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>
<article>
</article>
<div class="topic" data-reactid=".24rl768raww.$0">
  <div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
    <a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
      <img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
    </a>
  </div>
  <div class="tInfo" data-reactid=".24rl768raww.$0.1">
    <div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
    </div>
    <div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
    </div>
  </div>
</div>
</article>