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
}