多语言展示
当前在线:743今日阅读:167今日分享:16

div绝对居中、宽高自适应、多栏宽度自适应

最近工作上有需求写一些页面,很久没动手了,发现很多排版、样式等技巧都忘得差不多了,几番折腾,还算解决了基本的布局问题。下面文帮才分享一下常见的几种div布局问题。
方法/步骤
1

div绝对居中。效果如下图,就是固定大小的div在浏览器中垂直、水平都居中,适合用到浮动弹出框、页面居中的登陆框等你想得到的地方。以前我也曾使用window.onload和window.onresize来控制高度自适应,宽度好说,兼容IE和其他主流浏览器的,直接文本居中,内部“margin:0 auto;”。

2

废话不说,下面是现在的纯css解决方法。以宽高为400px*300px的div居中为例,body内只有div,所以简写css如下:div { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90;}

3

完整html源码如下:test

这样就完美实现了绝对居中,另外,如果设计中最外边框添加了border,div设置了padding等,一定要注意margin值要排除border宽或者padding值。

4

宽高自适应。效果如下图,很多情况下,我们希望页面的宽高可以自适应,宽度自适应很简单,当然,这里所说的自适应不是自适应内容,而是自适应浏览器,在同一行级只有一个层的情况下,宽度自适应直接使用width:100%;就可以了,但是高度自适应就有些不遂人意了,很多时候设置height:100%;完全不起效,其实,这时完全是因为div所在位置的上级元素没有指定高度。

5

同样以一个div为例,css如下:html,body { height:100%; width:100%; margin:0; padding:0;}div { height:100%; width:100%; background:#f90;}完整html源码如下:test

这里有一个细节问题吗,为什么设置body的height为100%的同时还要设置html呢?其实是为了解决firefox的兼容性,firefox默认body占用的不是100%;,这里有一个设计思想就是,如果某个层要用到100%或者其他值的百分比,上一级必须指定高度,当然,这同样应用到div下的div,具体该怎么写,大家摸索吧。

6

多栏宽度自适应。效果如下图,前面第二部分已经将过完全的自适应宽高,但其中的宽度自适应只是在一个div独占一行的情况下,如果出现多个div,如常见的主题部分左右、左中右布局的网站页面,两边固定宽,中间自适应,改怎么写呢?其实只要在中间部分的div下再套一层div即可。

7

示例css如下:html,body { height:100px; width:100%; margin:0; padding:0;}.left { height:100px; width:100px; background:#CC3; float:left;}.middle { margin:0 50px 0 100px;}.middle .content { height:100px; width:100%; background:#F60; float:left;}.right { height:100px; width:50px; background:#09F; float:left;}完整html源码如下:test

当然,两栏以及更多栏目都适应此方法,具体就不再举例了。

推荐信息