組み合わせ表示：明らかとインラインブロック：両方の垂直スタッキングないのdiv

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が積み重なっています。

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

inline-blockをどのように使用して、divsスタックを垂直にしますか？

ありがとうございました。

Answer 1

clearはあなたが望む効果を得るためにfloat

をクリアするため、.TheDataにfloat:leftを置いています。おそらく、div.TheDataより下の要素がclearで、floatでない要素が正しい高さでレンダリングされていることを確認したい場合もあります。

Updated fiddle

Answer 2

私が何をしたいことはthe one clear-fix to rule them allだと思います。

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