css三栏布局实现6种方法总结

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

三栏布局介绍：左边固定300px，右边固定300px，中间自适应，下面通过6种方法来实现该布局，欢迎补充~~~~

1. flex方式，实现简单，支持ie10+：

css代码：

.content-flex {display: flex;text-align: center;line-height: 200px;font-size: 20px;height: 200px;width: 100%;}.left-flex {width: 300px;background-color: bisque;}.right-flex {width: 300px;background-color: aquamarine;}.center-flex {flex: 1;background-color: brown;}

html代码：

<h2>1.flex方式</h2><div class="content-flex"><div class="left-flex">左边宽300</div><div class="center-flex">中间自适应</div><div class="right-flex">右边宽300</div></div>

效果图：

2. 浮动方式，会被clear:both清除浮动，兼容性好，注意，中间内容的div需放在最后

css代码：

 .content-flt {/* text-align: center; */line-height: 200px;font-size: 20px;height: 200px;width: 100%;}.left-flt {float: left;width: 300px;background-color: bisque;}.right-flt {float: right;width: 300px;background-color: aquamarine;}.center-flt {background-color: brown;}

html代码：

<h2>2.浮动方式</h2><div class="content-flt"><div class="left-flt">左边宽300</div><div class="right-flt">右边宽300</div><div class="center-flt">中间自适应</div></div>

3. margin负值方式，这个方案给我的感觉是，很累赘，也很不直观，此处中间div必须放在最上面，不然margin负值也负不上来啊-- 。：

同样的，css代码:

.content-mag {/* text-align: center; */line-height: 200px;font-size: 20px;width: 100%;height: 200px;}.left-mag {float: left;width: 300px;margin-left: -100%;background-color: bisque;}.right-mag {float: left;width: 300px;margin-left: -300px;background-color: aquamarine;}.center-mag {float: left;width: 100%;}.center-mag .center-body {margin: 0 300px;background-color: brown;}

html代码：

<h2>3.margin负值方式</h2><div class="content-mag"><div class="center-mag"><div class="center-body">中间自适应</div></div><div class="left-mag">左边宽300</div><div class="right-mag">右边宽300</div></div>

4. 定位方式，脱离了文档流，会影响下面的文档流。通过设置left和right实现自适应：

css代码：

.content-pos {position: relative;text-align: center;line-height: 200px;font-size: 20px;height: 200px;width: 100%;clear: both;}.left-pos {float: left;width: 300px;background-color: bisque;}.right-pos {float: right;width: 300px;background-color: aquamarine;}.center-pos {position: absolute;left: 300px;right: 300px;background-color: brown;}

html代码：

<h2 style=" clear: both;">4.定位方式</h2><div class="content-pos"><div class="left-pos">左边宽300</div><div class="right-pos">右边宽300</div><div class="center-pos">中间自适应</div></div>

5. table方式，父div设成display: table，子div设成displat: table-cell，table-cell平时用的不多，也就那这个例子做熟悉了

css代码：

.content-tab {display: table;text-align: center;line-height: 200px;font-size: 20px;height: 200px;width: 100%;}.left-tab {display: table-cell;width: 300px;background-color: bisque;}.right-tab {display: table-cell;width: 300px;background-color: aquamarine;}.center-tab {display: table-cell;background-color: brown;}

html代码：

<h2>5.table方式</h2><div class="content-tab"><div class="left-tab">左边宽300</div><div class="center-tab">中间自适应</div><div class="right-tab">右边宽300</div></div>

6. 网格方式

css代码：

.content-grid {display: grid;grid-template-rows: 200px;grid-template-columns: 300px auto 300px;text-align: center;line-height: 200px;font-size: 20px;width: 100%;}.left-grid {background-color: bisque;}.right-grid {background-color: aquamarine;}.center-grid {background-color: brown;}

html代码：

<h2>6.网格方式</h2><div class="content-grid"><div class="left-grid">左边宽300</div><div class="center-grid">中间自适应</div><div class="right-grid">右边宽300</div></div>

这篇关于css三栏布局实现6种方法总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---