15

次のように、4 つの div を含むコンテナー (幅は不明) があります。

| Div1 | Div2 ............... | .............. Div3 | Div4 |

左端と右端の div (Div1/Div4) は固定幅です。それは簡単な部分です。

Div2/Div3 の幅は不明です。コンテンツによっては、一方が他方よりもはるかに広くなる可能性があるため、それらに固定幅を設定することは避けたいと思います (したがって、たとえば、それぞれに 50% を使用させることはできません)。利用可能なスペース）

Div2/Div3 の幅がブラウザによって自動的に計算されるようにしたいのですが、残りのスペースが残っている場合は、残りのスペースを埋めるためにストレッチする必要があります (残りのスペースが Div2/Div3 間でどのように分割されているかは問題ではありません)。

私が今これに取り組んでいる方法は次のとおりです。

  • Div1 を左にフロート (または絶対配置)
  • Div4 を右にフロート (または絶対配置)
  • Div2 には、Div1 の幅と等しいマージン左があります (既知)。
  • Div3 には Div4 の幅と等しい右マージンがあります (既知)

私の質問は、残りの利用可能な幅を埋めるために Div2 と Div3 を伸ばすにはどうすればよいですか? 1 つのオプションは display: table を使用することであり、別の可能性はflex-boxであると思います。代替手段はありますか？

更新:わかりやすくするために編集しました。

更新 2: Div2 と Div3 がそれぞれ使用可能なスペースの 50% を取得する必要があるとは想定できないことに注意してください。これは質問で明示的に述べられていますが、どういうわけか、この仮定に基づいて回答を得続けています。

4

8 に答える 8

11

適切な幅を得るために、3 つの異なる解決策を思いつきました。

  • 表のセル:

    parent: {display: table}

childs: {display: table-cell}

  • フレックス グリッド:

    parent: {display: inline-flex}

childs: {flex-grow: 1}

  • ボックスサイズのコンテナ:

    parent: {float: left}

container: {box-sizing: border-box; padding: 0 WIDTH}

childs: {width: 50%}

最後の解決策は、余分な html マークアップを使用し、相対的な配置を使用して要素を垂直方向に揃えます (つまり、高さを固定する必要があります)。

古いブラウザーとの互換性が高く、実装が簡単で、問題なく動作するため、最初のソリューションを使用することをお勧めします。

デモ: http://jsfiddle.net/R8mqR/9/embedded/result/

于 2013-08-28T14:06:08.027 に答える
2

実際にtable、tr、tdなどを使用せずにdisplay:tableを使用したソリューションを次に示します:( FIDDLE )

HTML

<div id="foo">
    <div id="left"></div>
    <div id="center1">asdfasdfasdf</div>
    <div id="center2"> asdfasdlfkjasl;dkfjalsdjkf</div>
    <div id="right"></div>
</div>

CSS

div {
    border: solid 1px black ;
    height: 20px;
}

#foo {
    border: none; 
    display: table; 
    width: 100%;
}

#left, #right {width: 100px;}

#foo > div {
    display: table-cell;
}
于 2013-08-28T12:55:15.323 に答える
1

css3でフレックスボックスモデルを使えば可能だと思います

次のコードは IE10、chrome、firefox、safari で動作します

<div class="mainbox">
<div class="marpad marpadout">
       div1
    </div>
    <div class="subbox marpad">
       div2
    </div>
    <div class="subbox marpad">
       div3
    </div>
    <div class="marpad marpadout">
       div4
    </div>
</div>

スタイルは次のとおりです。

.mainbox{
    width:100%;
    display:-moz-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:box;
    background:#ff0000;
 }

.subbox{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    -ms-flex:1; 
    box-flex:1;
}

.marpad{
margin:5px;
padding: 0 10px 10px 0;
background:#ccc;
}
.marpadout{
width:100px;
}
于 2013-08-30T11:07:55.710 に答える