html - 组合显示 :inline-block with clear:both not vertically stacking divs

Question

我有一些如下所示的 HTML:

<div class="TheContainer">

 <div class="TheData">this is some text inline-block with clear</div>
 <div class="TheData">this is some other text inline-block but not clearing</div>

</div>

CSS 看起来像这样:

.TheContainer{
 margin:20px 20px;
 background:red;}

.TheData{
 display:inline-block;   
 clear:both;
 background:yellow;
 padding:5px 5px;
 margin:10px 10px;}

我正在使用 inline-block 以便 TheData div 很好地环绕它们的内容，而不是扩展 TheContainer 的总宽度。我还使用了 clear:both 以便这些 TheData div 一个一个地堆叠起来。

但是，当元素设置为 inline-block 时，clear:both 似乎不适用。 JSFiddle这里演示了这一点。

如何使用 inline-block 并使 div 垂直堆叠？

谢谢。

Answer 1

clear 仅用于清除float

要获得您想要的效果，请将 float:left 放在 .TheData 上。您很可能还希望在那些 div.TheData 下方有一个 clear 但没有 float 的元素，以确保容器以正确的高度呈现.

Updated fiddle