三栏布局的几种方法
三栏布局是一个比较常见的布局,在高度固定的情况下,左右各留出300px,中间自适应,可以有以下的几种写法。
比较常见的有浮动布局和绝对定位布局,但是flex布局现在也非常普遍了,Grid布局可能兼容性不太好,但也不失为一种方法。
因为下面的css代码中有许多的相同的地方,我们先我们先设置一些基本的css代码,用作左中右的颜色识别和高度的设置:
基本的css代码:
*{margin: 0; padding: 0;} .layout { margin-top: 20px; } .layout article div { min-height: 100px; } .left { background: red; } .right { background: green; } .center { background: #ddd; }
浮动布局(主要利用的就是浮动脱离文档流的特点):
html代码:
<section class="layout float"> <article class="left-center-right"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>浮动解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> </article>
</section>
css代码:
.layout.float .left { float: left; width: 300px; } .layout.float .right { float: right; width: 300px; } .layout.float .center { margin: 0 300px 0 300px; }
绝对定位布局(与浮动定位布局的原理基本相同):
html代码:
<article class="left-center-right"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>绝对定位解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> </article>
css代码:
.layout.absolute .left { position: absolute; left: 0; width: 300px; } .layout.absolute .center { margin: 0 300px 0 300px; } .layout.absolute .right { position: absolute; right: 0; width: 300px; }
弹性盒子布局:
这里用到了flex的一个简写方式。
flex
属性是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。 --阮一峰《Flex布局教程》
flex-grow定义项目的放大比例。
如果flex-grow为1,那么它将占据项目的剩余空间,如果有许多个子项目,则他们将等分剩余项目空间。如果不清楚的,建议去看阮一峰老师的Flex布局教程,里面讲的很清晰。
html代码:
<section class="layout flex"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flex解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section>
css代码:
.layout.flex .left-center-right{ display: flex; } .layout.flex .left { width: 300px; } .layout.flex .center { flex: 1; } .layout.flex .right { width: 300px; }
Grid布局(兼容性较差)
grid布局则可以直接控制二维布局,直接设定横向和纵向的布局方式。
html代码:
<section class="layout grid"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>Grid布局解决方案</h2> <p>这是三栏布局的中间部分这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section>
css代码:
.layout.grid .left-center-right{ display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; }