利用CSS的三列等高布局

以前自己都是用JS去处理，原来用CSS也是很方便的，可以少写代码^_^

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>三列等高布局</title><style type="text/css">        *{margin:0; padding:0;}        body{font-size:12px; font-family:Arial;}

        #Header,#Footer{margin:0 auto; height:100px; width:800px; background:Red; color:#FFF;} /*关部和尾部样式*/        #Container{width:800px; margin:10px auto; height:1%; overflow:hidden;}/*overflow:hidden可以用来清除浮动，而此处再加上height:1%也是为了解决IE6下光用overflow不能清除浮动的原因*/        #Container div{float:left; display:inline; width:258px; border:1px solid #F60;                        background:url(border_bottom.png) repeat-x left 300px #CCC; color:Blue; padding-bottom:9999px;                        margin-bottom:-9999px;}/* 左浮动以后再用 display:inline是为了消除IE6的双边距Bug */        #Container div.center{margin-left:10px; margin-right:10px; height:300px;}        #Container div.left{height:300px;}</style></head><body><div id="Header">我是头部</div><div id="Container"><div class="left">清除浮动可以用 overflow:hidden 或 overflow:auto，<br />在比较标准的浏览器里没有问题，<br />但 IE6 没有效果，为了兼容 IE6 ，<br />可以为父元素：<br />

1、设置一个合适的宽度，<br />但“合适的宽度”有的时候不好掌握；<br />

2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点；<br />

3、加上 zoom:1 ，不能通过W3C验证。</div><div class="center">        此处的三列等高布局是利用了CSS的特性，先给容器加上一个很大的padding-bottom再用 margin-bottom负值补回来，而外层（#Container）用overflow:hidden将不显示区域隐藏起来，        因为这些Div我都设了1px的边框，此时你会发现，他们下部的边框没有了，因此还得再做一张1px的图片，作为这些div的背景显示在底部。</div><div class="right">右边</div></div><div id="Footer">我是底部</div></body></html>

运行效果：

转载于:https://www.cnblogs.com/jancyxue/archive/2011/12/29/2306820.html

利用CSS的三列等高布局相关推荐

html设置多列布局间隙,css设置多列等高布局的方法示例
1.真实等高布局 flex技术点:弹性盒子布局flex,默认值就是自带等高布局的特点. 定义flex布局的时候,有一些默认值. flex-direction属性定义主轴的方向.默认值为row,一般是水 ...
css布局：多列等高布局
多列等高布局是在一个容器里面,并排的多列,如果内容的高度无法在一开始确定(例如内容是动态的),又需要让各列自然地撑开(不出现每列里面的滚动条),这时候需要用css或者js的方法把各列高度设置为最高列的 ...
CSS布局——多列等高布局
先看一个案例: 左边是导航部分,右边是详细内容,两者的高度都是不固定的.左边导航栏的内容可能比右边的内容高,反之亦然.但是两者的背景颜色高度始终保持一致! 下面进入正题: 1.利用border实现 & ...
CSS实现三列图片等宽等间距布局
每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%<!DOCTYPE html> <html> ...
实现两（三）列等高布局的方法
第一种方法: <style type="text/css"> *{margin: 0; padding: 0;} #wrap{ padd ...
css实用技巧：巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
布局：多列等高布局方法
多列等高布局在实际应用中比较常见,作为面试的一个点也常遇到.做个总结. 首先想到的第一种就是 flex 和 min-height , 后朋友提醒,去掉 min-height 试试.由于align-it ...
任意列+左右两列等高布局，并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
[html] 列举几种多列等高布局的方法
[html] 列举几种多列等高布局的方法 1, 使用table布局 `.row { display: table; }.row > * { display: table-cell; }2, 使用 ...

利用CSS的三列等高布局

利用CSS的三列等高布局相关推荐

最新文章

热门文章