は、MIN-幅に

Question

を設定し、右側の列で、私はこのように振る舞う応答レイアウトを持ちたい、3列レイアウト応答：

• BIG SCREEN（は右のdivより大きくとを残しました250px）：コンテンツの divは、の左にとの間の中央にする必要があります。 div。
• 小画面：右 divの幅は250px以上にする必要があります。 の左にのdivが表示され、次にのコンテンツ divになるはずです。そしての対応サイズは、コンテンツと右を左 - （私はちょうど私が望む動作を実証したい数字は関係ありません）、いくつかのビューポートのサイズ、ここで、私が何を意味するか説明するために

divs。

ビューポート= 1600px

300ピクセル| 1000px | 300ピクセル

ビューポート= 1500px

250ピクセル| 1000px | 250ピクセル

ビューポート= 1400px

150ピクセル| 1000px | 250ピクセル

ビューポート= 1250px

0PX | 1000px | 250ピクセル

ビューポート= 1000px

0PX | 750px | 250px

これを達成する方法はわかりません。私はここにこだわっ：

HTML

<div id="left">Left</div> 
<div id="content">content</div> 
<div id="right">Right</div> 

CSS

body { 
    min-width: 800px; 
    height: 100%; 
} 

html { 
    height: 100%; 
} 

div#left { 
    background: #ccc; 
    width: 20%; 
    height: 100%; 
} 

div#content { 
    background: #aaa; 
    width: 60%; 
    min-width:300px; 
    height: 100%; 
} 

div#right { 
    background: #ccc; 
    width:20%; 
    height: 100%; 
} 

Answer 1

簡単な方法は、彼らが幅を下回ることはありませんので、異なる画面サイズで異なるパーセンテージに変更し、それを微調整することですあなたは欲しい（ピクセル単位）。

ビューポート= 1600px 25％| 50％| 25％

ビューポート= 1500px 20％| | 60％| 20％

ビューポート= 1400px 20％| 55％| 25％

ビューポート= 1250px display：none | | 80％| 20％

ビューポート= 1000px display：none | 75％| 25％

いくつかのカラムは固定されたサイズで固定され、その他の点では流動性が必要な場合は、はるかに複雑になります。親divを子列の幅に等しいパディングにしてから、負のマージンを使用して列を親のパディングに移動する必要があります。

Answer 2

聖杯の技術（http://alistapart.com/article/holygrail）

*, *:before, *:after{ 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
} 
 

 
.column { 
 
    float: left; 
 
    position: relative; 
 
    padding:20px; 
 
} 
 

 
.wrapper{ 
 
    min-width:550px; 
 
    margin-left:0; 
 
    margin-right:250px; 
 
} 
 

 
.left{ 
 
    display:none; 
 
    background:yellow; 
 
    margin-left: -100%;  
 
} 
 

 
@media screen and (min-width: 1250px) { 
 
    .wrapper{ 
 
    margin-left:150px; 
 
    } 
 
    .left{ 
 
    display:block; 
 
    width:150px; 
 
    right: 150px; 
 
    } 
 
} 
 

 
.content{ 
 
    width:100%; 
 
    background:green; 
 
} 
 

 
.right{ 
 
    background:red; 
 
    width:250px; 
 
    margin-right: -250px; 
 
} 
 

 
@media screen and (min-width: 1500px) { 
 
    .wrapper{ 
 
    margin-left:250px; 
 
    } 
 
    .left{ 
 
    width:250px; 
 
    right: 250px; 
 
    } 
 
} 
 

 

 

 
@media screen and (min-width: 1600px) { 
 
    .wrapper{ 
 
    margin-left:300px; 
 
    } 
 
    .left{ 
 
    width:300px; 
 
    right: 300px; 
 
    } 
 
}

<div class="wrapper clearfix"> 
 
    <div class="content column">content</div> 
 
    <div class="left column">Left</div> 
 
    <div class="right column">Right</div> 
 
</div>

古いブラウザの互換性については気にしない場合は、またフレキシボックス

と試みることができます