html - 具有最大宽度的 CSS 多列流体设计的序列（按特定顺序调整大小）

Question

有很多教程教人们如何使用最小宽度、最大宽度等设置三列流体设计。例如http://www.alistapart.com/articles/holygrail/

我的问题是，每当我尝试调整浏览器窗口的大小时，首先调整右列的大小，当它达到最小宽度时，调整中心列的大小等等。有人知道吗？最好不使用 Javascript 或任何 CSS hack

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
}