html - max-width を使用した CSS 複数列流動デザインのシーケンス (特定の順序でサイズ変更)

Question

最小幅、最大幅などを使用して 3 列の流体設計をセットアップする方法を人々に教えるチュートリアルがたくさんあります。例: http://www.alistapart.com/articles/holygrail/

ここでの私の問題は、ブラウザー ウィンドウのサイズを変更しようとすると、最初に右の列のサイズが変更され、最小幅に達すると中央の列のサイズが変更されるなどです。できればJavascriptやCSSハックを使用しないでください

Answer 1

パーセンテージベースの幅を使用して流動的なグリッドを作成し、オプションで列に最小幅を設定できる必要があります (列が壊れないように、コンテナーに子の合計の最小幅を与えるだけです)。

html:

<div class="wrap">
    <div>col 1</div>
    <div>col 2</div>
    <div>col 3</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.wrap {
   width:100%;    
   min-width:500px;
}
.wrap > div { 
    float:left;
    height:50px;
    text-align:center;
}

.wrap > div:nth-child(1){ 
    background : #FCC;
   width:20%;
    min-width:100px
}
.wrap > div:nth-child(2){ 
    background : #CFC;
    width:60%;
    min-width:300px
}.wrap > div:nth-child(3){ 
    background : #CCF;
   width:20%;
    min-width:100px
}