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

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

3.1 三列：

HTML:

CSS:

3.2 二列

HTML:

CSS:

原理：

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

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

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

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

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

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

CSS之创建等高列布局之二相关推荐

CSS之创建等高列布局之一
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
CSS之创建等高列布局之三
4. 使用正padding和负margin对冲实现多列布局方法这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow: ...
HTML+CSS 编辑的（多列布局、相册、百度首页）、盒子模型
多列布局(浮动) <html> <title></title><head><link rel="stylesheet" hre ...
html设置多列布局间隙,css设置多列等高布局的方法示例
1.真实等高布局 flex技术点:弹性盒子布局flex,默认值就是自带等高布局的特点. 定义flex布局的时候,有一些默认值. flex-direction属性定义主轴的方向.默认值为row,一般是水 ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
潭州教育html视屏,潭州教育HTML多列布局CSS实现
HTML多列布局CSS实现 HTML之多列布局CSS实现 inline-block与多列布局 inline-block是内将元素样式指定为行内内联样式. CSS中通过display:inline-bl ...
html中如何多列布局,CSS3 多列布局
CSS3 多列布局使用CSS3,您可以将元素的文本内容分成多列. 创建多列布局 CSS3引入了多列布局模块,用于以简单有效的方式创建多个列布局.现在,您无需使用浮动框即可创建像在杂志和报纸上看到的布 ...
纯CSS无hacks的跨游览器多列布局(转)
转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...
css实现3行2列居中高度自适应布局
1.CSS2盒模型自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...

CSS之创建等高列布局之二

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

3.1 三列：

HTML:

CSS:

3.2 二列

HTML:

CSS:

原理：

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

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

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

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

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

CSS之创建等高列布局之二相关推荐

最新文章

热门文章