三栏布局，三栏就是三个栏目板块放在一行，左右定宽，中间自适应。
左右宽度300px,中间宽度自适应。（部分中间栏要放在文档流前面优先渲染）

【示例】
<style type="text/css"> * {margin: 0;padding: 0;} .wrap{width: 80%; height: 150px; margin: 0px auto 20px; text-align: center; line-height: 100px; color: #fff;} .wrap .middle{text-align: left; overflow: auto;} .wrap .middle h2{text-align: center; margin: 10px 0; padding: 0; line-height: 30px;} .wrap .middle p{line-height: 20px; font: 12px;} /* 浮动布局 */ .layout1{height:100%;} .layout1>div{height: 100%;} .layout1 .left,.layout1 .right{width: 300px; background: #f00;} .layout1 .middle{background: #00f;} .layout1 .left{float: left;} .layout1 .right{float: right;} /* 绝对定位布局 */ .layout2{height:100%; position: relative;} .layout2>div{top:0; bottom: 0; position: absolute;} .layout2 .middle{left:300px; right:300px; background: #00f;} .layout2 .left,.layout2 .right{width: 300px; background: #f00;} .layout2 .left{left: 0;} .layout2 .right{right: 0;} /* flex弹性盒子布局 */ .layout3{height:100%; display: flex; flex-direction: row/* 默认值 */;} .layout3>div{height: 100%;} .layout3 .middle{flex:1; background: #00f;} .layout3 .left,.layout3 .right{flex-basis: 300px; background: #f00;} .layout3 .left{order: -1;} /* 圣杯布局*/ .layout4{height: 100%; padding: 0 300px;} .layout4>div{height: 100%; position: relative; float: left;} .layout4 .left,.layout4 .right{width:300px; background: #f00;} .layout4 .middle{width: 100%; background: #00f;} .layout4 .left{margin-left: -100%; left: -300px;} .layout4 .right{margin-left: -300px; right: -300px;} /* 双飞翼布局 */ .layout5{height: 100%;} .layout5>div{height: 100%; float: left;} .layout5 .middle-out{width: 100%;} .layout5 .left,.layout5 .right{width:300px; background: #f00;} .layout5 .middle{height:100%; margin:0 300px; background: #00f;} .layout5 .left{margin-left: -100%;} .layout5 .right{margin-left: -300px;} /* 表格布局 */ .layout6{height: 100%; width: 100%; display: table;} .layout6>div{display: table-cell;} .layout6 .left,.layout6 .right{width:300px; background: #f00;} .layout6 .middle{background: #00f;} /* 网格布局 */ .layout7{display: grid;/* 设置高度 */grid-template-rows: 100%;/* 设置列数 */grid-template-columns: 300px auto 300px;} .layout7 .left,.layout7 .right{background: #f00;} .layout7 .middle{background: #00f;} </style> <!-- 浮动布局 --> <div class="wrap"> <div class="layout1"> <div class="left">left</div> <div class="right">right</div><!-- 右栏部分要写在中间内容之前 --> <div class="middle"><h2>浮动布局</h2><p>这种布局方式，dom结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。 浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。</p></div> </div> </div> <!-- 绝对定位布局 --> <div class="wrap"> <div class="layout2"> <div class="left">left</div> <div class="middle"><h2>绝对定位布局</h2><p>绝对定位布局优点就是快捷，设置很方便，而且也不容易出问题。缺点就是，容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。</p></div> <div class="right">right</div> </div> </div> <!-- flex弹性盒子布局 --> <div class="wrap"> <div class="layout3"> <div class="middle"><h2>flex弹性盒子布局</h2><p>flexbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。 flexbox的缺点就是IE10才开始支持，但是IE10的是-ms形式的。</p></div> <div class="left">left</div> <div class="right">right</div> </div> </div> <!-- 圣杯布局 --> <div class="wrap"> <div class="layout4"> <div class="middle"><h2>圣杯布局</h2><p>圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，相当于中间那栏是圣杯主体，left和right俩栏是圣杯耳朵；用到定位的属性关系加上margin-left负值的特性来完成。<br /> 和双飞翼布局异同：他们解决办法一半是相同的，都是使用float浮动，利用了margin-left负值的特性，让他们移动到上一行，使三栏并排，形成三栏布局；不同的是双飞翼布局改变了html结构，多用了一个div，少用4个css属性，减少了相对定位的麻烦，比圣杯布局思路简单一点。</p></div> <div class="left">left</div> <div class="right">right</div> </div> </div> <!-- 双飞翼布局 --> <div class="wrap"> <div class="layout5"> <div class="middle-out col"> <div class="middle"><h2>双飞翼布局</h2><p>双飞翼布局据说是玉伯大大提出来的，始于淘宝UED，双飞翼布局用来诠释三栏布局就是把三栏布局比作一个大鸟，中间自适应那栏是鸟的身体，left和right那俩个栏是他们的翅膀；<br /> 最开始他们都是float：left，所以最开始margin-left是0；负的margin-left会让元素沿文档流向左移动，如果负的值较大，比如说-100%，相当于直接向左移动出100%一整行的距离，因为left左边是父元素边框，所以直接跳到上一行左移，移动100%距离相当于直接从上一行的末尾开始左移，移到上一行的开头，right在上一行末尾是因为负值300px,刚好是right的宽度，所以他从上一行的末尾开始向左移移动了300px;如果加大right的负值，他会继续向左移。</p></div> </div> <div class="left col">left</div> <div class="right col">right</div> </div> </div> <!-- 表格布局 --> <div class="wrap" style="height: 200px;"> <div class="layout6"> <div class="left">left</div> <div class="middle"><h2>表格布局</h2><p>表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局。当内容溢出时会自动撑开父元素。<br /> 表格布局也是有缺陷:①无法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。</p></div> <div class="right">right</div> </div> </div> <!-- 网格布局 --> <div class="wrap"> <div class="layout7"> <div class="left">left</div> <div class="middle"><h2>网格布局</h2><p>CSS Grid是创建网格布局最强大和最简单的工具。就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。<br /> 但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。</p></div> <div class="right">right</div> </div> </div> <p>&nbsp;</p>
  复制代码  另存代码  提示：您可以先修改部分代码再运行