三列布局，左右宽度固定，中间宽度自适应变化---普通格式和双飞翼格式
Posted my_notebook
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三列布局，左右宽度固定，中间宽度自适应变化---普通格式和双飞翼格式相关的知识，希望对你有一定的参考价值。
两种做法。
做法一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } #left { width: 100px; float: left; background: green; height: 300px; } #right { width: 100px; float: right; background: red; height: 300px; } #middle { margin-right: 110px; margin-left: 110px; height: 300px; background: #ccc; } </style> </head> <body> <div id="left"> </div> <div id="right"> </div> <div id="middle"> </div> </body> </html>
思路是：1、利用left/right两个元素实现左右浮动，浮动流不会影响middle元素的位置，但会遮盖文档流。
2、 然后在middle元素中加入margin-right和margin-left属性，使中间的元素撑开占据空间，如果只设置了margin-right或者margin-left，中间的元素就不会充满中间的空间。
做法二：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } #bd{ padding: 0 230px 0 190px;/* 给100%宽度的main元素增加内边距，然后利用相对定位移动sub和extra元素 使main元素的内容正常显示 */ } .sub{ /*需要保证sub位于最左边*/ float: left; width: 190px; height: 30px; background-color: red; margin-left: -100%; position: relative; left: -190px; } .main{ float: left; width: 100%; height: 30px; background-color: blue; } .extra{ float: left; width: 230px; height: 30px; background-color: green; margin-left: -230px; position: relative; right: -230px; } </style> </head> <body> <div id="page"> <div id="bd"> <div class="main">main这是主体</div> <div class="sub">sub这是左边</div> <div class="extra">extra这是右边</div> </div> </div --> </body> </html>
经典的双飞翼布局。由main、sub、extra组成，main是位于中间的，sub、extra位于左右。
在这里把main元素放在sub之前，是因为可以先解析main元素的内容，使阅读网页的人可以更快看到网页的主体内容。
思路：1、三个元素均进行左浮动，而且sub和extra有固定宽度，main则是100%宽度。此时，main和另外两个元素分为两层。
2、利用负边距，比如sub的margin-left:-100%;可以使其浮动至上一行的最左边，也就是main所处行的左边。extra的margin-left:230px（大于或等于extra元素的宽度），元素浮动至上一行最右边。
3、经过上面两步之后，sub和extra浮动元素会浮动到main元素所在行的左右，然后遮盖住main元素左右的部分内容，比如main元素中的文字此时是从最左边开始的，但是被sub元素遮住了。利用三个元素的父元素bd，设置padding，增加内边距，左右内边距刚好等于sub和extra的宽度。这时，整体的元素宽度就变短了，左右出现空白。而且main的左右还是被遮住的。
4、最后一步，再对sub和extra进行相对定位，使两个元素相对原来的位置偏移到左右空白的地方。main中的文字也不会被遮盖了！
以上是关于三列布局，左右宽度固定，中间宽度自适应变化---普通格式和双飞翼格式的主要内容，如果未能解决你的问题，请参考以下文章