3

インライン ブロックに div の構造を持つページがあります。これで、各ブロック div に最小サイズが設定され、ウィンドウ サイズがすべての内部 div の最小幅の合計よりも小さいサイズに縮小されたら、要素の一部を次の行に移動します。次の行に単独で移動するdivにパディングを追加したいと思いますが、これを実現するためにjsを使用するつもりはありません。CSSだけでこれを行うにはどうすればよいですか？

<div width="100%">
   <div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
   <div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
   <div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
</div>

レンダリング

    -------------------   -------------------  -------------------
   |                   | |                   ||                   |
   |                   | |                   ||                   |
   |     div1          | |     div 2         ||      div 3        |
   |                   | |                   ||                   |
    -------------------   -------------------  -------------------

限られたスペース

    -------------------   ------------------- 
   |                   | |                   |
   |                   | |                   |
   |     div1          | |     div 2         |
   |                   | |                   |
    -------------------   ------------------- 
    <^margin 5px inserted^>
    -------------------
   |                   | 
   |                   | 
   |       div 3       | 
   |                   | 
    -------------------
4

2 に答える 2

4

メディアクエリを使用して、ビューポートの幅に基づいてCSSルールを適用できます。

@media all and (max-width: _width_value_) {
    /* When the screen size is less than or equal to _width_value_ the css rules here will apply */
}

これが、元の質問に対する解決策を提供するjsfiddleです。

于 2013-03-07T12:30:03.263 に答える
1

margin-bottomトリックを実行しますが、すべてのdivが1行にある場合でもそこにあります。JavaScript imhoなしで他の方法はありません：

.innderDiv {
    display:inline-block;
    width: 33%;
    max-width: 300px;
    min-width: 135px;
    border: 1px dashed;
    margin-bottom: 5px;
}

http://jsfiddle.net/ruslans/KNDFE/

于 2013-03-07T12:09:58.603 に答える