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一个堆叠在另一个之上。

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

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

感谢。

Answer 1

clear仅用于清算float

要获得所需效果，请将float:left放在.TheData上。您很可能还需要div.TheData以下clear但float以下的元素，以确保容器呈现正确的高度。

Updated fiddle

Answer 2

我认为你想要的是the one clear-fix to rule them all。

我认为你不想要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

组合显示：内联块与清除：两者都不垂直堆叠div

2 个答案: