私は3つのコンテナ、left、middleおよびrightを持っています。幅の比率は15％、70％、15％です。私は中央のコンテナの最大幅を1000pxに制限したい。固定幅コンテナの横の2つのコンテナに休憩スペースを配分する
画面の解像度が1428px未満であれば問題ありません。画面解像度が1428ピクセルより大きい場合、70％は1000ピクセルより大きくなります。だから私はこれらの大きな画面のための別のルールを書く必要があります。
したがって、中央のコンテナは1000pxです。私は残りのスペースを他の2つのコンテナに分配する方法 - leftとright？ JavaScriptソリューションは、ブラウザで一定のジャンプ/揺れを与えます。私はブラウザでこれらの揺れを避けたい。
これはなんで事があるのですか。
HTML：：だからあなたはあなたがブラウザのサポートに満足している場合には（私は知らないこのようなCSSを適用する
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
持っていますが、私はありませんがあると思い、私はあなたがhtmlのこのような何かをしたとしCSSのみ別の方法）
CSS：
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.left,.right,.center{
float:left;
margin:0;
padding:0;
display:inline-block;
height: 100px;
}
.left,.right{
width:15%;
background:yellow;
}
.center{
background:red;
width:70%;
max-width:1000px;
}
@media(min-width:1000px){
.left,.right{
width:calc((100vw - 1000px)/2)
}
}
https://jsfiddle.net/Lghms68y/ここではフィドルです。注：あなたは効果を見るためにページをズームアウトしなければなりません:)
多分 'width：calc（（100vw - 1000px）/ 2）;のようなものでしょう。 caniuse.com/#feat=calcここにルールのブラウザサポートがあります:) –