0

左、中央、右の 3 つの div があります。問題は、左が 320 ピクセル、右が 150 ピクセルで、中央が残りのスペースを取る必要があることです。これどうやってするの？100% 応答する必要があります。画面の解像度は 1920 から 1600 までさまざまですが、左右を固定する必要があります。

コメントに投稿されている例は機能しますが、幅が最大 768 の場合に 2 列を作成し、display: none; で 3d div を非表示にする場合。テーブルの例では機能しません。また、css3ボックスを備えたもう1つは、エクスプローラーでは機能しないため、どちらも機能しません.pollyfillはありません。

それで、これに対する修正はありますか、それとも古典的な方法でそれを行い、マージンやパディングなどで補う必要がありますか........

4

1 に答える 1

0

これにはdisplay:tableプロパティを使用できます。このように書きます。

.parent{
    display:table;
    width:100%;
}
.parent > div{
    display:table-cell;
    min-height:200px;
}
.left{
    width:320px;
    background:green;
}
.center{
    background:red;
}
.right{
    width:150px;
    background:yellow;
}

これをチェックしてくださいhttp://jsfiddle.net/BNQfC/1/

また

CSS3 flex-boxプロパティを使用できます。

これをチェックしてくださいhttp://jsfiddle.net/sjYNy/1/

于 2012-11-05T11:53:53.787 に答える