0

このフィドルを見てください。どちらの側にも div があり、固定幅は 50px で、display:inline-block.

これら 2 つの div の間のギャップを埋めるために内側の div を拡張したいのですが、問題は、この div 内に多くのテキストを配置すると、次の行にプッシュされ、レイアウトが崩れることです。

また、少量のテキスト（ページ幅未満）がある場合でも、中央のdivがスペースを埋めるようにしたいです。

左右の div が常に左右にあり、コンテンツ div が常にそれらの間のスペースを埋めるようにするにはどうすればよいですか?

CSS3 を使用してみましたが、あまりサポートさcalcれていないようです。

4

2 に答える 2

0

これは、レイアウトにテーブルを使用することによって過去に処理されたような状況です。これは、新しい Flexbox の実装によって将来修正される予定ですhttps://developer.mozilla.org/en-US/docs/CSS/Flexbox

それまでの間、display: table-cell を使用してテーブル効果をエミュレートできます。これにより、各 div がテーブルに期待される方法で引き伸ばされます。全体の幅をより細かく制御したい場合は、display: table-row と設定された幅を持つ div でラップできます。

.col {
    background-color:#333;
    color:#EEE;
    width:50px;
    display:table-cell;
}
.middle {
    background-color:#EEE;
    color:#333;
    display:table-cell;
}
于 2012-08-04T12:40:37.840 に答える
0

JavaScript の使用に慣れている場合は、次のように動作します。

​$(function(){
    $('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );

    $(window).resize(function() {
        $('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
    });

});

JSFiddle の作業: http://jsfiddle.net/vh8Zu/

于 2012-08-04T12:47:47.507 に答える