DIV+CSS浮动布局完美解决方案 |
作者:佚名 发布时间:2012-01-16 浏览:2337次 |
宝鸡市世纪网络是在宝鸡市工商局注册的专业提供网站建设、网站优化、网站推广,软件开发的高新技术企业, 一直致力于面向宝鸡地区党政机关、企事业单位提供大中型门户网站解决方案、 OA 办公自动化系统解决方案,以及中小型应用软件开发及其它信息化外包业务。目前已承建宝鸡地区近630多家政府网站、企业网站,是宝鸡网站建设行业规模最大、客户数量最多、技术力量雄厚的宝鸡网络公司。以下内容就由宝鸡世纪网络为你收集整理。 DIV+CSS网页布局常用到浮动方案,但浮动并不像表格那样好用,很多时候会出问题。同时设计不够良好的浮动布局,在不同的浏览器下会有不同的表现,可能设计时照着常用的浏览器做好了,拿到其它浏览器里一看又乱掉了。浏器自身的问题往往是这些麻烦的罪魁祸首。Firefox对标准的支持较好些,IE7、IE8次之,IE6目前用户群较多,但也比较糟糕,经常莫名其妙地多出一些空隙等等。拿浮动布局来说,你算好的宽度在Firefox以及 IE7、IE8下可能是正常的,拿到IE6里就会发现不该换行的时候它却换行了。 然而,不管HTML页面设计人员怎么骂微软,网页还是要做的。我这里就以自己的经验给大家介绍一些常用的解决方案。 1、如果是两栏并列,要在中间显示分界线或图片,可以使用repeat-y的背景图片来实现,此样式写在这两栏的父级元素中,可以保证分界线与最高的栏等高。 示例:
假设vline.gif是宽100px高1px,左边99像素为白色,最右边1像素是黑色,则此背景图片实现的效果就是在两列间拉出一条黑色竖线。 不过要说明一下,这种方法如果父元素宽度设计200px,理论上是正确的,但实际上在IE6里会换行,因为IE6不遵从W3C标准。在IE6里你可以把父元素宽度设得比200px大一些,但这样格式会不够完美。你可以用下面的margin法解决这个换行问题。 2、如果有一列想用自适应宽度,而不是固定宽度,可以巧用margin属性。比如左边固定100px,右边自适应,则可以让父元素“margin- left:100px”,第一列再“margin-left:-100px”,第二列就可以用“width:100%”来实现自适应宽度了。如果不这样巧用margin,第二列没法设百分比,因为浏览器客户区宽度*100%+100px是超出浏览器客户区总宽度的,浏览器会出现横向滚动条;又因为浏览器客户区总宽度不确定(确定的话就不用什么自适应了),你也没法用类似80%这样的百分比使其正好撇下100px给第一列。 另外你可能想让这两列的父级有一个最小宽度以避免两列换行,这个可以用min-width属性来实现。 示例代码:
3、自适应高度的该如何设计呢?很多人为这个问题头痛过,抱怨height:100%不管用。其实,让它管用很简单,只是别忘了给html也加上 height:100%的属性。没错,就是html,你可以写成这样:html,body{height:100%}。但这样还有个问题,没解决。如果你想让一行字始中处于最下面,该怎么做呢?答案还是margin。 你可以把主体部分放在一个DIV中,将其最小高度设为100%,然后在后面放页脚的DIV,假如它的高度为40px,则“margin- top:-40px”,这样可能会使主体部分下边的内容被遮住,解决办法是在主体部分最下面的元素上加“padding-bottom:40px”属性即可。理论上讲加“margin-bottom:40px”也可以,但观查发现在IE里会出现垂直滚动条。 示例代码:
注意别忘了样式表中要加:html,body{height:100%;} |