具有最大宽度的 CSS 多列流体设计的顺序(按特定顺序调整大小)

Question

有很多

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

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

Answer 1

您应该能够使用基于百分比的宽度来获得流体网格，并可以选择在列上设置最小宽度（只需为您的容器提供其子项总和的最小宽度以防止 cols 损坏）：

.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
}