在一个布局中，假设有导航元素和内容元素，切给他们都分别应用了背景，理想情况下，背景应该拉长到整个布局的最大高度，从而形成列的效果，但是实际上，因为导航元素没有扩展到最大高度，所以它们的背景不会拉长，如图所示，左边的导航的灰色背景的高度没有达到最大高度。

解决方法：为创建列的效果，需创建一个伪列，即在一个占据布局最大高度的元素上应用重复的背景效果——faux列。关键在于创建合适的背景图片。

固定宽度的布局

只需在容器元素上应用一个垂直重复的背景图像，其宽度与导航区域相同。为固定宽度的布局设计faux列是很容易的，因为知道列的尺寸和位置。

#wrapper{

    background: #fff url() repeat-y left top;

}

流式布局

流式布局有点复杂，因为列的尺寸和位置随着浏览器窗口缩放而变化，技巧是按百分比对背景图像进行定位。

使用像素设置背景的位置：图像的左上角会定位在距离元素左上角指定像素数的地方。
使用百分数定位：会对图像上的对应点进行定位，例如：将垂直和水平位置设置为20%，那么实际上会把图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。

例如需要创建如下图的布局：左边导航为次内容区，占总内容区的25%，右边为主内容区，主内容区中左边为主内容区，占主内容区的72.82%，右边为次内容区。

简单代码如下：

<div class="wrapper">

   <div class="inner-wrapper">

    <div class="content">

        <div class="primary">

            <div class="primary">     </div>

            <div class="secondary">   </div>

        </div>

        <div class="secondary"> </div>

    </div>

  </div>

</div>

<style>

        .wrapper{

            width:76.8%;   /*960÷1250=76.8%*/

            margin:0 auto;

            text-align:left;

            min-width : 62em; /*比较小的窗口尺寸，布局太挤，所以添加以em为单位的min-width*/

            max-width : 125em; /*设置为em为单位的max-width是为了确保文本行的长度适合阅读*/

        }

        .content .primary{

            width : 72.82%;  /*670÷920=72.82% ，因为在wrapper设置了水平居中，所以40px均匀分布在content容器两侧各20px*/

            float:right;

            display:inline;

        }

        .content .secondary{

            width:25%;   /*230÷920=25%*/

            float:left;

            display:inline;

        }

        .content .primary .primary{

            width:59.7%;  /*400÷670=59.7%*/

            float:left;

            display:inline;

        }

        .content .primary .secondary{

            width:34.33%;   /*230÷670=34.33%*/

            padding-right:3%;   /*20÷670=3% 设置内边距，避免其包含的文本紧挨着元素的右边缘*/

            float:right;

            display:inline;

        }

</style>

上述代码实现了三列，但是并没有实现两侧的背景图像，下面步骤来逐步实现：

1.给次内容区创建faux列

先创建一个faux图像，4000px宽，5px高。
因次要内容区是总宽度的25%，所以在背景图像上创建宽25%的对应区域，即图像的faux列部分是宽为1000px的灰色，其余为白色。
图像的faux列的右边缘与图像的左边相距25%，次内容区的右边缘与容器的左边相距25%，所以如果把这个图像作为背景应用于容器，并将水平位置设置为25%，那么faux列的右边缘会正好与次内容区的右边缘对齐。

增加的代码为：

.wrapper{

    background:#fff url(1.gif) repeat-y 25% 0;

}

2.为主内容区创建背景

先创建一个faux图像。
因主内容区1是主内容区总宽度的72.82%，所以在背景图像上创建宽72.82%的对应区域为白色，其余为灰色。
图像的faux列的左边缘与图像的左边相距72.82%，次内容区的左边缘与容器的左边相距72.82%，所以如果把这个图像作为背景应用于容器，并将水平位置设置为72.82%，那么faux列的左边缘会正好与次内容区的左边缘对齐。
因为在wrapper元素上已经应用了背景，所以需要添加一个容器元素，然后将该faux列的背景图像应用于这个新的容器元素，即inner-wrapper元素。

增加的代码为：

.inner-wrapper{

    background:#fff url(2.gif) repeat-y 72.82% 0;

}

巴特西

ch8 faux列

固定宽度的布局

流式布局

1.给次内容区创建faux列

2.为主内容区创建背景

最新文章

热门文章