6

我有一些看起来像这样的 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，以便TheDatadiv 很好地环绕它们的内容，而不是扩展TheContainer. 我也在使用clear:both这些 TheData div 堆叠在一起。

但是，clear:both当元素设置为inline-block. 这里的JSFiddle演示了这一点。

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

谢谢。

4

2 回答 2

7

clear仅用于清算float

为了得到你想要的效果，穿上float:left. .TheData您很可能还需要一个低于div.TheDatas的元素，clear但没有float，以确保容器以正确的高度呈现。

更新的小提琴

于 2012-12-11T01:23:09.817 回答
3

我认为你想要的是一个明确的解决办法来统治他们。

我不认为你想要display: inline-block;，因为它实际上是按照它应该的方式工作的。float: left; clear: both;使用内部元素和容器元素的 clear-fix可能会更好：

CSS：

TheContainer{
     margin:20px 20px;
     padding:10px 10px;
     background:red;
     clear:both;
}

.TheData{
    float:left;
    clear: both;
    background:yellow;
    padding:5px 5px;
    margin:10px;
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}.

<div class="TheContainer cf">

    <div class="TheData">smaller</div>
    <div class="TheData">smaller a</div>
    <div class="TheData">smaller a b</div>
    <div class="TheData">smaller a b c</div>
    <div class="TheData">smaller a b c d</div>
    <div class="TheData">this is some other text inline-block but not clearing</div>
</div>

jsFiddle

于 2012-12-11T01:28:05.700 回答