2016-04-29 5 views
0

1行に複数のインラインブロック要素がある場合、次の行に異なる方法でラップされた要素をスタイルすることができます。要素が新しい行に折り返されているかどうかを知るためのCSS方法はありますか?

だから、

<div class='wrapper'> 
    <div style='display: inline-block; width: 500px'>...</div> 
    <div style='display: inline-block; width: 500px'>...</div> 
</div> 

ブラウザは< 1000幅と、第二子<div>は異なるスタイルを持つことができます。

私はjsでそれを行うことができますが、私はそれを避けようとしています。私はメディアクエリを使用できることも知っていますが、最小幅のカットオフは、<div>のラップ(正確なサイズが分かりません)とまったく同じではないことが懸念されます。

答えて

3

CSSは、実行中の行ボックスの最初の行を識別するための擬似要素である::first-lineのみを提供します。他の行には擬似要素を提供しませんし、行内にある行に基づいてインラインレベルの要素を一致させるための擬似クラスも提供しません。

::first-lineを使用すると、要素の最初の行のスタイルを変更することができます(つまり、2行目の要素のスタイルを変更し、すべての行にスタイルを適用し、元のとおりに最初の行をスタイルするのではなく)プロパティのセット。

関連する問題