html – 组合显示：内联块和清除：两者都没有垂直堆叠div

概述我有一些看起来像这样的 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>< 我有一些看起来像这样的 HTML：

<div > <div >this is some text inline-block with clear</div> <div >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;}

我正在使用内联块,以便TheData div很好地包围它们的内容,而不是扩展TheContainer的总宽度.我也使用clear：两者都使这些TheData div一个堆叠在一起.

但是,似乎很清楚：当元素设置为内联块时,两者都不适用.这里的JSFiddle证明了这一点.

如何使用内联块并使div垂直堆叠？

谢谢.

解决方法 clear仅用于清算浮动

要获得所需的效果,请将float：left放在.TheData上.你很可能也想要一个div以下的元素.Datas有明确但没有浮动,以确保容器呈现正确的高度.

Updated fiddle

总结

以上是内存溢出为你收集整理的html – 组合显示：内联块和清除：两者都没有垂直堆叠div全部内容，希望文章能够帮你解决html – 组合显示：内联块和清除：两者都没有垂直堆叠div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。