从三栏自适应宽度布局到css布局的讨论_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了从三栏自适应宽度布局到css布局的讨论_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6959字，纯文字阅读大概需要10分钟。
内容图文
如何实现一个三栏自适应布局，左右各100px，中间随着浏览器宽度自适应？ 第一个想到的是使用table布局，设置table的宽度为100%，三个td，第1个和第3个固定宽度为100px，那么中间那个就会自适应了，下面是一个实时的demo：
| left | middle | right |
但是table布局是不推荐的，table布局是css流行之前使用的布局，有很多缺点：当table加载完之前，整个table的都是空白的，table将数据和排版参和在一起，使得页面混乱，并且table布局修改排版十分麻烦和困难。
如果不用table布局，那么第二个想到的办法是采用float，让左边的div float left，右边的div float right，如下边所示：
Action 1 先让左右两个div浮动
float left
float right
中间还有一个div，如果将中间的div排在第二：
leftmiddleright
那么效果是这样的：
Action 2 右边的div浮动到了第二行
left
middle
right
因为div默认的display为block，如果不设置width的话，块级元素会尽可能多地占用水平空间。如果设置了width: 200px，效果是这样的：
Action 3 右边的div仍然浮动到了第二行
float left
middle
right
第三个div仍然会换行，因为float right会排到当前行尽可能右边的位置，即它的容器盒的边缘或者挨着的上一个float的元素，如果当前行没有空间的话，会不断地往下移，直到有足够的空间。由于middle是一个块盒，即使设置了width，当前行的空间也会被占用，所以right只能到下一行才有空间。
同时注意到middle虽然设置了200px，但是看起来和left一样是100px宽了。这是因为float了的元素虽然在正常的文档流之内，但是只是让相邻(非float)的元素的内容围绕着它排列，它仍然占据相邻元素的background和border空间。如果给middle添加一个白色的border，那么看起来是这样的：
Action 4 浮动的元素占据了文档流相应元素的背景和边缘空间
float left
middle
right
明显看到，float left的元素占据了middle的background和border的空间，同时middle的内容围绕着left排列。理解这点很重要。
假设middle里面有个p标签，而p标签的内容比较长，那么围绕的效果是这样的：
Action 5 浮动的环绕效果
float left
middle
环绕的元素一旦超出float元素高度之后，会以正常的宽度显示
float right
正如上面的注释一样，在float元素的那一行，相邻的元素的内容的宽度将会缩短，以适应float元素占去的宽度，而一旦超过float元素的区域，相邻元素的内容显示宽度就会正常。
由于默认的div会占一行，所以不能将middle放在第二个div，得放到第三个div。把第二个div和第三个div换一下顺序：
leftrightmiddle
先让float right的div渲染，再渲染middle的div。因为渲染left之后，left的那一行仍然有空间，这是由于float left之后，只会占据当前行的background和border，而当前行还有很大的空间，于是第二步渲染right时就和left同一行了，效果：
Action 6 先渲染左右两个div，再渲染中间的div
left
right
middle
如果不设置middle的width，那么middle将围绕着left和right环绕，和left一样，right也会占用middle的空间。
Action 7 中间的div围绕着左右的div环绕
left
right
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ middle围绕着left和right环绕，同时left和right占据着middle的空间 ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
为了让middle和left/right中间有一个margin值，设置下middle的左右margin各为110px，这样就和左右和中间就各有10px的间距：
Action 8 设置中间div的margin值为100px + 10px
left
right
middle 设置margin: 0 110px;
这种办法的优点是实现简单，支持性好。
这种自适应宽度的原理是利用了float的围绕特性，占据自然文档流的background/border位置。这个围绕特性不仅会影响当前行的内容，还会影响下一行的内容，如下说明：
第一段内容，略
第二段内容，略
Action 8 float元素占据了下一行的空间
第一段落围绕着图片排列
图片的float属性也影响了第二段落，也就是说float会占据自然文本流相应位置元素的背景和边框，即使和float的元素不在同一行
网上还有一种margin负值法。margin负值法的步骤是：第一步让中间的middle占100%的宽度，而middle的内容设置左右margin各为100px，这样就实现了middle居中自适应宽度的效果：
middle
middle
接下来让left的margin-left值为-100%，由于这个比例是相对于浏览器窗口大小的，所以要是left和middle是在同一行的话，left就可以跑到middle的最左边。但是因为middle的容器盒是一个普通的div，会占据一整行，left就会排到下一行，这个时候设置margin-left为一个负数时就跑出屏幕了。所以让middle float一下，left就会排到第一行最左边，同时middle覆盖在上面：
middleleft
middle
left
从上面可以看到：这样实现，导致left的内容被挤出目标区域，因为正如上面所说，middle占据了left的背景空间，上面的情况是把它占满了，left内容只能overflow了。所以这样实现是有问题的，得让left也向左float一下，这样left就紧挨在middle后面了，由于middle占了100%的宽度，所以再让left向左边margin了-100%后，left就刚好在最左边了。
middleleft
middle
left
注意这里，虽然left float之后看起来也是被排到下一行了，但和默认的div独占一行是不一样的。float之后的left仍然和middle是同一行的，因为空间不足的时候，float只是把当前行盒的空间撑大，就和一个div块盒里面有很多个display为inline-block的行内级盒是同样的道理。例如：
按钮3设置了一个很大的margin-left的负值后并不是跑到屏幕外了，而是在和其它两个按钮同一行的位置，显示如下：
按钮1 按钮2 按钮3
注意，设置了float的元素并不是把display改成了 inline-block，大部份display的css计算值都变成了block，同时对原本是display: flex的没有改变：
| inline | block |
| inline-block | block |
| inline-table | table |
| table-row | block |
| table-row-group | block |
| table-column | block |
| table-column-group | block |
| table-cell | block |
| table-caption | block |
| table-header-group | block |
| table-footer-group | block |
| flex | flex, but float has no effect on such elements |
| inline-flex | inline-flex, but float has no effect on such elements |
| other | unchanged |
来自MDN
由上表可看出，一个span设置了float: left/right之后，就不需要再设置成display: block/inline-block了，直接设置宽高即可。
回归正题，left的div设置了margin-left: -100%之后就跑到左边去了，而right也是同样道理，将right的margin-left相应地设置为-100px，就跑到最右边去了：
middleleft<div style="margin-right: -100px;">right
内容总结
以上是互联网集市为您收集整理的从三栏自适应宽度布局到css布局的讨论_html/css_WEB-ITnose全部内容，希望文章能够帮你解决从三栏自适应宽度布局到css布局的讨论_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。