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;}

の合計幅を拡張するのではなく、divがコンテンツを適切にラップするinline-blockように使用しています。また、これらのTheDatadivが上下にスタックされるように使用しています。TheDataTheContainerclear:both

ただし、clear:both要素がに設定されている場合は適用されないようinline-blockです。ここのJSFiddleはこれを示しています。

どうすればinline-blockdivを垂直にスタックさせることができますか？

ありがとう。

4

2 に答える 2

7

clearクリア専用ですfloat

必要な効果を得るには、を付けfloat:leftます.TheData。div.TheDataほとんどの場合、これらのsの下に要素が必要ですが、コンテナが正しい高さでレンダリングされることを確認する必要はありclearません。float

更新されたフィドル

于 2012-12-11T01:23:09.817 に答える
3

私はあなたが望むのはそれらすべてを支配するための1つの明確な修正だと思います。

display: inline-block;それは実際に想定どおりに機能しているので、私はあなたが望んでいないと思います。float: left; clear: both;内部要素とコンテナ要素のクリアフィックスを使用したほうがよい場合があります。

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 に答える