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

我有一些看起来像这样的

HTML：

this is some text inline-block with clear

this is some other text inline-block but not clearing

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垂直堆叠？

谢谢.