如何以正确的方式包装div？

Question

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

例如：

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

看一下这个例子

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

这是因为你没有包装，而且这些元素是自由浮动的;

在下面的代码片段中，我使用article选择器和已清除的浮点数将您的元素包装在行中：

.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>