天天看点

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

3. 给容器div使用单独的背景色(流体布局)

这种布局可以说是就是第二种布局方法,只是这里是一种多列的流体等高列的布局方法。前面也说过了,其实现原理就是给每一列添加相对应用的容器,并进行相互嵌套,并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器,比如说我们说的三列,那么你就需要使用三个容器

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

3.1 三列:

HTML:

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

CSS:

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列
CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

3.2 二列

HTML:

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

CSS:

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

原理:

我们有三列,并且也说过了,这三列内容都放在了三个容器的div中,我们每一列的背景色不是放在内容列中,而是放置在容器中,现在我们需要通过对容器进行相对定位,把背景显示出来,而且我们这个容器是最外层的不能进行相对定位的移动

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

上面我们把容器进行了相对定位,这样一来,我们内容也相应的做了移动,现在我们需要对页面列的内容也进行相对定位,并把内容和容器进行相反方向的定位,这样内容和容器背景色就能对应上了,请看下图所展示的

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

接下来我们需要把溢出的部分切掉去,和前面一相,在最外面的容器加上overflow:hidden这样就OK了

最后为了让你的效果更加好看一点,你可以尝试给他们加上padding,比如说每列加上2%的padding值,具体实现可以简单从下图中得到

CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列
CSS之创建等高列布局之二3. 给容器div使用单独的背景色(流体布局)3.1 三列:3.2 二列

优点是兼容各浏览器,可以制作流体等高列,交无列数限制

标签使用较多,结构过于复杂,不易于理解,不过你掌握了其原理也就不难了,这也不算太大缺点

css