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

来源：互联网 2023-02-21 22:23:37 版权归原作者所有，如有侵权，请联系我们

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

方法/步骤

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

1该信息未经授权抓取自百度经验

废话不说，下面是现在的纯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;}

完整html源码如下：

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

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

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

同样以一个div为例，css如下：

html,body { height:100%; width:100%; margin:0; padding:0;}

div { height:100%; width:100%; background:#f90;}

完整html源码如下：!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>html xmlns=”http://www.w3.org/1999/xhtml”>head>meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />title>test/title>style>html,body { height:100%; width:100%; margin:0; padding:0;}div { height:100%; width:100%; background:#f90;}/style>/head>body>div>/div>/body>/html>

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

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

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

示例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源码如下：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>html xmlns=”http://www.w3.org/1999/xhtml”>head>meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />title>test/title>style>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;}/style>/head>body>div class=”left”>/div>div class=”middle”>div class=”content”>/div>/div>div class=”right”>/div>/body>/html>当然，两栏以及更多栏目都适应此方法，具体就不再举例了。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签：电脑技术适应绝对居中宽度

上一篇：winrar解压缩软件打开有广告了，我们该怎么办下一篇：怎样更改织梦DEDE后台管理员admin名称

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

方法/步骤

热门文章

标签列表