4.6  混合布局

4.6  混合布局

现实中，设计师通常混合使用固定宽度、流式布局或者弹性布局元素，为用户提供每种方式的优点，并且将缺点降低到最小。

例如，内容区域通常会使用em单位（以此来确保每行的适当长度以及在IE6下的字体缩放）。侧边栏通常使用固定单位（因为侧边栏通常会包含固定宽度的Banner，这样固定宽度才比较可行）。另外一个相关的技术是为流式内容指定“最小宽度”和“最大宽度”属性。使用CSS属性而不是弹性元素，让用户可以根据个人喜好调整每行的长度。

Jello-liquid布局虽然不是很流行，但却比较有趣。为了保持内容区的可读性，此布局努力降低布局增长时比例增长的速度。所以，一个自适应布局在1 024 px×768 px （960÷1 024=0.937 5）视口中具有960 px宽度，在窗口增长到1 440 px×900 px （1 440÷1 350=0.937 5）时会得到一个比1 350 px小的宽度。为了实现这种效果，布局中很大一部分元素都使用了固定的像素值，剩下的元素使用了与窗口宽度相关的相对值。

固定部分占布局的比例越小，布局随着窗口拉伸时所获得效果就越好。此举很简单，也很智能。

另外一个有趣的方法是结合了流式和弹性元素的流式弹性布局。这种布局基于em单位，但是使用相对值设置了“最小宽度”和“最大宽度”（考虑了窗口的宽度，赋予用户将布局限制在一定缩放范围内的能力）。通过设置最大和最小宽度，文本缩放到一定程度的时候会停止变化。布局随着窗口的变化而自动调整，保留了适应性，同时也是弹性的。在窗口尺寸或者字体尺寸发生变化时，各列的宽度在自动变化。

在下面的例子中，为容器和每一列设置了“max-width”属性。这样布局就会限制在整个视口的宽度。同样，在较老版本的IE 中并不支持“max-width”，所以需要为IE 作一些特殊的处理，代码如下所示（在下一个例子中将不再列出）。

#container {

width: 60em;

max-width: 100%;

}

#header {

background-color: #cccccc;

width:60em;

max-width:100%;

}

#left Col {

width:37.5em;

float:left;

display: inline;/* IE 5/6 Doubled Float-Margin Bug */

max-width:62.5%;

}

#right Col {

width:22.5em;

float:right;

max-width:37.5%;

}

#footer {

width:60em;

max-width:100%;

clear:both;

}