ci策划 网站开发,冬夜主题wordpress,广告代运营,seo内部优化方案3. 给容器div使用单独的背景色#xff08;流体布局#xff09;
这种布局可以说是就是第二种布局方法#xff0c;只是这里是一种多列的流体等高列的布局方法。前面也说过了#xff0c;其实现原理就是给每一列添加相对应用的容器#xff0c;并进行相互嵌套#xff0c;并在…3. 给容器div使用单独的背景色流体布局
这种布局可以说是就是第二种布局方法只是这里是一种多列的流体等高列的布局方法。前面也说过了其实现原理就是给每一列添加相对应用的容器并进行相互嵌套并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器比如说我们说的三列那么你就需要使用三个容器 3.1 三列
HTML: CSS: 3.2 二列
HTML: CSS: 原理
我们有三列并且也说过了这三列内容都放在了三个容器的div中我们每一列的背景色不是放在内容列中而是放置在容器中现在我们需要通过对容器进行相对定位把背景显示出来而且我们这个容器是最外层的不能进行相对定位的移动 上面我们把容器进行了相对定位这样一来我们内容也相应的做了移动现在我们需要对页面列的内容也进行相对定位并把内容和容器进行相反方向的定位这样内容和容器背景色就能对应上了请看下图所展示的 接下来我们需要把溢出的部分切掉去和前面一相在最外面的容器加上overflow:hidden这样就OK了
最后为了让你的效果更加好看一点你可以尝试给他们加上padding比如说每列加上2%的padding值具体实现可以简单从下图中得到 优点是兼容各浏览器可以制作流体等高列交无列数限制
标签使用较多结构过于复杂不易于理解不过你掌握了其原理也就不难了这也不算太大缺点
