実際にインラインではないインラインブロックを作成する可能性がありますか？

Question

私はしばしば、要素の幅をその要素に含まれる要素のサイズに合わせたいと思っています。 inline-blockこれを達成する。ただし、の部分がinline-blockになりたくない - つまり、次のinline-block要素がその下に表示されることを願っています。

CSSでこれを達成する簡単な方法はありますか？私はいつも私のHTMLの要素の後ろに<br>というタグを付けることはできないと知っていますが、それは面倒です。

Answer 1

多くのソリューションがありますが、最も一般的なものは、あなたが要素は、あなたが明確に追加した新しい行であることを強制したい場合は、フロート

<div class="float"> 
    <div class="child">here is content</div> 
</div> 

.float{float: left;} 

を使用することです：両方（または左または右、あなたに応じて、

この表示を考慮してください：インラインブロックはIE7では動作しません。浮動小数点の唯一の問題は、このdivを子の幅に合わせてページの中央に配置する場合です。水平方向に

もう1つ注意してください。オーバーフロー：隠されたプロパティはいつでもあなたの親友です浮かべたdiv :)

Answer 2

あなたが行うことができますで何らかの問題が発生したという2つの要素を持つ：

<div> 
    <div class="element"> 
     content... 
    </div> 
</div> 

CSSルールに：

.element { display: inline-block; } 

T .elementの幅を調整している "本物の"要素です。同封の<div>は、各要素を独自のインラインフローに強制するためのものです。ここで

Answer 3

はあなたが記述するもの実現フィドルです：http://jsfiddle.net/PhilippeVay/VwCgJ/

それは浮動要素（したがって、幅はコンテンツにajustedされる）、あなたが行と次のclear財産にしたい最後の要素にクラスを使用しています

<p> 
    <span>lorem</span> 
    <span class="rightmost">ipsum</span> 
    <span>third item: below please</span> 
    <span>fourth and last</span> 
</p> 

C：隣接セレクタ.rightmost + span

HTMLの助けを借りて要素、 SS：（インラインブロックのような）

span { 
    display: block; 
    float: left; 
    padding: 20px; 
    background: lightblue; 
    border-right: 2px solid white; 
} 

.rightmost { 
    background: red; 
    color: white; 
} 

.rightmost + span { 
    clear: both; 
} 

インラインコンテンツは、そのコンテナの幅全体を占有し、あなたはbr要素を持つ新しい行を強制してきました。
反対側では、フローティング要素をクリアすることができます（隣接するセレクタを使用すると、特定の要素の後に要素をクリアすることができます）。