三栏布局的7种解决方案

本文主要是介绍三栏布局的7种解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

写出三栏布局，左栏宽度190、右栏宽度300px，中间宽度自适应。

1、浮动布局

1）解决方法

浮动方案是通过将左边栏、右边栏设置定宽、浮动，中间栏通过margin-left、margin-right来确定位置、宽度。

<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
.container{width:100%;}
.left-sidebar,.right-sidebar,.main{border:1px solid #ddd; min-height: 50px; padding:5px;}
.left-sidebar{float:left; width:190px; box-sizing:border-box;background: #c2ff68; }	
.right-sidebar{float:right; width:300px; box-sizing:border-box; background: #ffff37;}
/*margin-left = 左边栏宽度（含边框）- 左边栏的右边框宽度。margin-right = 右边栏宽度（含边框）- 右边栏的左边框宽度。
如果三栏等高,margin-left、margin-right直接等于左边栏、右边栏的宽度即可*/
.main{background:#2894ff; margin-left:189px; margin-right:299px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class='container'><div class='left-sidebar'>左边栏</div><div class='right-sidebar'>右边栏</div><div class='main'>主体内容区域：<br/>这是通过浮动方案来解决的。<br/>这是通过浮动方案来解决的。<br/></div><div class="clear"></div>
</div>

效果如下图：

2）优缺点

适用范围：上面这种方式不论高度是否确定，都可以使用。但是适用于左边栏、右边栏和中间栏相邻的那条边框宽度、颜色、类型都一样，否则。但用于布局一般应该是一样的。后面的方案不再考虑边框的问题。

如果颜色、类型不同，一旦三栏高度不同或宽度不同，一条边框可能就会有两种样式。

如果宽度不同，三栏高度如果不同，中间栏被档掉一部分，如下图：

优点：实现简单，做好清除浮动即可；兼容性比较好；网页缩放时能够正常布局

缺点：浮动元素脱离文档流；如果没有做好清除浮动，父元素容易出现高度塌陷；无法优先加载重要内容

2、绝对定位布局

1）解决方法：

绝对定位是将三栏设置为绝对定位，中间栏通过设置left值、right值来确定宽度。

<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
.container{position:relative;width:100%;height:50px}
.left-sidebar,.right-sidebar,.main{border:1px solid #ddd; height: 50px; padding:5px;}
.left-sidebar{position:absolute;left:0; width:190px; box-sizing:border-box; background: #c2ff68; }	
.main{position:absolute; left:190px; right:300px; margin-left:-1px;/*数值等于左边栏的右边框宽度*/; margin-right:-1px;/*数值等于右边栏的左边框宽度*/  background:#2894ff;}
.right-sidebar{position:absolute; right:0; width:300px; box-sizing:border-box; background: #ffff37;}
</style>
</head>
<body>
<div class='container'><div class='main'>主体内容区域：<br/>这是通过绝对定位来解决的。<br/>这是通过绝对定位来解决的。<br/></div><div class='left-sidebar'>左边栏</div><div class='right-sidebar'>右边栏</div>
</div>

效果同浮动方案。

2）优缺点

优点：绝对定位布局简单方便，不容易出问题；能够优先加载重要内容；网页缩放时能保持正常布局。

缺点：只适用固定高度的布局。绝对定位元素脱离文档流，父元素会出现高度塌陷，只能通过给父元素设置固定高度才能解决这一问题。

（浮动元素只要通过将父元素变成BFC即可解决，但绝对定位这种方式也无效。父元素是没有办法获取到绝对定位元素的高度。要了解BFC可以参考CSS: 潜藏着的BFC）

3、表格布局

1）解决方案

<head>
<style>
.container{display:table; table-layout:fixed; width:100%;}
.left-sidebar,.right-sidebar,.main{display:table-cell; min-height: 50px;}
.main{background:#2894ff;}
.left-sidebar{width:190px; background: #c2ff68; }
.right-sidebar{width:300px; background: #ffff37;}
</style>
</head>
<body>
<div class='container'><div class='left-sidebar'>左边栏</div><div class='main'>主体内容区域：<br/>这是通过表格布局来解决的。<br/> 这是通过表格布局来解决的。<br/>这是通过表格布局来解决的。<br/></div><div class='right-sidebar'>右边栏</div>
</div>

优点：实现容易，兼容性好；网页缩放时能保持正常布局

缺点：一栏超出高度，其他栏也跟着变高，可能并不是我们期待的效果；无法设置栏间距；不能优先加载重要内容

4、圣杯布局

A.三栏包括在一个容器中，空容器的左padding、右padding分别设置为左栏宽度值、右栏宽度值。

B.三栏全部设置为左浮动。左右两栏加上负margin让其跟中间栏div并排为一行。

（浮动元素可以设置负值，如果浮动元素B前面有浮动元素A，如果设置margin-left之后，上一行能够容纳下B，那B会跑到上一行。

但因为浮动元素有条规则：浮动元素高度不会超过之前的浮动元素。所以如果B的margin-left的绝对值即使很大，也不可能超过A的高度。）

C.设置完B后，左栏、右栏和中间栏都有重叠，设置左右为相对定位，并设置left、right值去除重叠。

<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
.container{padding-left:190px; padding-right:300px; }
.left-sidebar,.right-sidebar, .main{float:left; min-height: 50px;}
.main{box-sizing:border-box; width:100%; background:#2894ff;}
.left-sidebar{margin-left:-100%; width:190px; position:relative; left:-190px; background: #c2ff68; }
.right-sidebar{width:300px; margin-left:-300px; position:relative; right:-300px;background: #ffff37;}
.clear{clear:both;}
</style>
</head>
<body>
<div class='container'><div class='main'>主体内容区域：<br/>这是通过圣杯布局来解决的。<br/>这是通过圣杯布局来解决的。<br/></div><div class='left-sidebar'>左边栏</div><div class='right-sidebar'>右边栏</div><div class="clear"></div>
</div>

效果如下：

2）优缺点

优点：能够先加载重要内容；允许任何列是最高的；DOM结构简单

缺点：同双飞翼布局相比，圣杯布局的样式复杂些；圣杯布局在缩放的时候，如果中间宽度小于左侧宽度，布局混乱，如下图所示。

5、双飞翼布局

1）解决方法

双飞翼布局是淘宝UED针对圣杯布局讨论出的一种优化方案。

双飞翼布局比圣杯布局多使用了1个div，但不用相对布局。

<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
.left-sidebar,.right-sidebar,.main{float:left; min-height: 50px;}
.main{width:100%;}
.mainContent{margin-left:190px; margin-right:300px; background:#2894ff;}
.left-sidebar{margin-left:-100%; width:190px; background: #c2ff68; }
.right-sidebar{width:300px; margin-left:-300px; background: #ffff37;}
.clear{clear:both;}
</style>
</head>
<body>
<div class='container'><div class='main'><div class='mainContent'>主体内容区域：<br/>这是通过浮动方案来解决的。<br/>这是通过浮动方案来解决的。<br/></div></div><div class='left-sidebar'>左边栏</div><div class='right-sidebar'>右边栏</div><div class="clear"></div>
</div>

效果同圣杯布局。

2）优缺点

优点：能够先加载、渲染重要内容；允许任何列是最高的；相比圣杯布局，缩放时，也能保持正常布局。如下图所示，是浏览器缩放到比较小时双飞翼布局的效果。

缺点：同圣杯布局相比，DOM结构复杂，需要增加额外标签

关于双飞翼布局与圣杯布局比较，可以查看聊聊为什么淘宝要提出「双飞翼」布局

6、flex布局（又称为弹性布局）

flex布局可通过阮一峰的文章去深入了解：flex布局语法篇和flex布局使用篇。

1）解决方法

下面是采用css3的flex布局来实现的。

<style>
.container{display:flex;}
.left-sidebar,.right-sidebar,.main{min-height: 50px;}
.main{background:#2894ff; flex:1}
.left-sidebar{width:190px; background: #c2ff68; }
.right-sidebar{width:300px; background: #ffff37;}
</style>
</head>
<body>
<div class='container'><div class='left-sidebar'>左边栏</div><div class='main'>主体内容区域：<br/>这是通过flex布局来解决的。<br/> 这是通过flex布局来解决的。<br/>这是通过flex布局来解决的。<br/></div><div class='right-sidebar'>右边栏</div>
</div>

效果图如下：

可以看到中间栏超出指定高度后，其他两列也跟着变高，这个可能不是我们期待的效果。可以修改容器的样式来让其他两列保持自己的高度：

.container{display:flex; align-items:flex-start;}

2)优缺点

Flex是一维布局系统，适合做局部布局，比如导航栏组件。

优点：绝对定位和相对定位都会引起元素脱离文档流，flex布局能够避免这个问题。flex布局实现简单，可以实现各种布局。flex是一个比较完美的方案。目前移动端的布局也都是用flexbox。 flex布局是未来的趋势。

缺点：不能兼容IE9及以下浏览器。

7、grid布局（又称为网格布局）

网格布局可通过MDN网站深入了解：网格布局

CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样，网格布局让我们能够按行或列来对齐元素。但是，使用CSS网格可能还是比CSS表格更容易布局。例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

1）解决方法

<style>
.container{display:grid; grid-template-columns: 190px auto 300px;}
.left-sidebar,.right-sidebar,.main{min-height: 50px;}
.main{background:#2894ff;}
.left-sidebar{background: #c2ff68; }
.right-sidebar{background: #ffff37;}
</style>
</head>
<body>
<div class='container'><div class='left-sidebar'>左边栏</div><div class='main'>主体内容区域：<br/>这是通过网格布局来解决的。<br/> 这是通过网格布局来解决的。<br/>这是通过网格布局来解决的。<br/></div><div class='right-sidebar'>右边栏</div>
</div>

效果如下图：