三栏布局在一些电商等类型的网站中很是常见,左右两边固定宽度的导航,而中间则是随浏览器大小改变宽度的内容区域,常见的如京东的页面,今天就来详细阐述几种三栏布局的方法.
一、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局的实现方案</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
height: 400px;
}
.left{
float: left;
200px;
background-color: red;
}
.right{
float: right;
300px;
background-color: green;
}
.main{
margin: 0 320px 0 220px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
这种方案,是左右两边浮动,然后给中间内容区域设置margin,不过要注意的是,要先让左右两边浮动,再将中间内容区域放进去。缺点是主要内容无法最先加载,当内容较多时,会影响用户使用。
补充:这种方案,当浏览器宽度小于左右导航宽度之和时,就会发生错乱。
二、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏布局的实现方案</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ height: 400px; } .left{ float: left; width: 200px; background-color: red; margin-right: 20px; } .right{ float: right; width: 300px; margin-left: 20px; background-color: green; } .main{ background-color: yellow; overflow: hidden; } </style> </head> <body> <div class="wrap"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div> </body> </html>
这种方案和上面那种方案类似,不过是利用BFC 规则(即BFC 区域，不会与浮动元素重叠),缺点和方案一一样。
补充:当浏览器宽度小于两边导航宽度加上margin值之和时,会发生错乱。
三、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏布局的实现方案</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ height: 400px; } .box{ float: left; width: 100%; } .main{ margin: 0 320px 0 220px; background-color: yellow; } .main::after{ display: block; content: ""; font-size: 0; height: 0; clear: both; zoom: 1; } .left{ width: 200px; background-color: red; float: left; margin-left: -100%; } .right{ width: 300px; background-color: green; float: right; margin-left: -300px; } </style> </head> <body> <div class="wrap"> <div class="box"> <div class="main"></div> </div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
这里利用的是浮动元素margin为负值的应用(这里不做细讲),优点是主题内容先加载,不过html结构稍稍复杂了一点。
四、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏布局的实现方案</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ height: 400px; } .wrap{ margin: 0 320px 0 220px; } .main{ float: left; width: 100%; background-color: yellow; } .left{ width: 200px; background-color: red; float: left; margin-left: -100%; position: relative; left: -220px; } .right{ width: 300px; background-color: green; float: left; margin-left: -300px; position: relative; right: -320px; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
这种方案和方案三类似,也是有限加载内容主体,但是其有一个致命问题,就是当浏览器缩放到一定程度,布局会乱掉。
五、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏布局的实现方案</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ height: 400px; } .wrap{ display: flex; } .main{ flex-grow: 1; background-color: yellow; } .left{ order: -1; flex: 0 1 300px; margin-right: 20px; background-color: red; } .right{ flex: 0 1 200px; background-color: green; margin-left: 20px; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
弹性布局,未来的发展发现,但是其中也有一些问题,不仅仅是兼容性的问题,....
六、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏布局的实现方案</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ height: 400px; } .wrap{ display: table; width: 100%; } .main,.right,.left{ display: table-cell; } .left{ background-color: red; width: 200px; } .main{ background-color: yellow; } .right{ background-color: green; width: 300px; } </style> </head> <body> <div class="wrap"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> </body> </html>
table布局,缺点是无法设置间距,但可以通过其他结构进行改造,给它们设置内填充来解决间距问题。
七、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏布局的实现方案</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ height: 400px; } .wrap{ position: relative; } .main{ background-color: yellow; margin: 0 320px 0 220px; } .left{ position: absolute; left: 0; top: 0; background-color: red; width: 200px; } .right{ position: absolute; right: 0; top: 0; background-color: green; width: 300px; } </style> </head> <body> <div class="wrap"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
利用定位来布局,简单粗暴,但是很有效果。
以上,就是我所总结的七种方案.......