0

これが私の例です - http://jsfiddle.net/xcSvD/

HTML:

<div id="parent" >
  <div id = "child1"></div>
  <div id = "child2"></div>
<div>

CSS:

    #parent {
        width: 200px;
        height: 30px;
        border: 1px solid black;
        overflow:hidden;


}

    #child1 {
        height:100%;
        width:100px;
        float:left;
        border: 1px solid green;
        overflow:hidden;
    }

     #child2 {
         height:100%;
         overflow:hidden;
         width:95px; 
         /*width:105px;*/
         float:left;
         border: 1px solid red;
    }

ご覧のとおり、2 つの div があり、それぞれ「overflow:hidden」スタイルを持っています。ケース 1: div の幅の合計が親の幅 (100+95 < 200) を超えない場合、すべて問題なく、2 つの div が互いに近くにレンダリングされます。ケース 2: div の幅の合計が親の幅を超える場合 (100+105 > 200)、最新の div が次の行に移動されます。次の行に移動する代わりに、ケース 2 の最後の div が残りのスペース (200 - 100) をすべて使用するようにするにはどうすればよいですか?

4

3 に答える 3

0

このワーキングフィドルを見てください

#parent {
    width: 200px;
    height: 30px;
    border: 1px solid black;
}
#child1 {
    height:100%;
    width:100px;
    float: left;
    border: 1px solid green;
}
#child2 {
    height:100%;
    border: 1px solid red;
}

最初の div は左に流れ、2 番目の div は通常のブロック要素なので、残りのスペースを取ります。

取り外しましたoverflow:hidden;が、元に戻すことができます..

編集：

この新しいFiddleでは、2 番目の div が 105 ピクセルより広くなることはありませんが、親が小さい場合、最後までしか広がりません。

#child2
{
    height:100%;
    max-width: 105px; /*max width of 105px*/
    border: 1px solid red;
    overflow: auto; /*important*/
}
于 2013-09-27T13:34:44.467 に答える
0

95+105+2+2 (2 と 2 はボーダー ボックス) を指定しているため、次のコードは機能しません。幅 103 と 93 を使用してこれを解決するか、単に次のタグを使用します。

Box-sizing: Border-box

これをこれら 2 つの子クラスに追加できます。このタグは CSS3 を使用するブラウザーでのみサポートされていることに注意してください。ただし、さまざまな JavaScript プラグインを使用してこれを修正できます。

#child1 {
        height:100%;
        width:100px;
        float:left;
        border: 1px solid green;
        overflow:hidden;
    }

     #child2 {
         height:100%;
         overflow:hidden;
         width:105px;
         float:left;
         border: 1px solid red;
    }
于 2013-09-27T13:42:53.900 に答える