纯CSS实现三列布局(两边固定,中间自适应)

看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西。

也是给我自己复习吧,以前有人问道,我还没答上来呢。==

看代码:

html:

 <div class="top">this is top</div>
<div class="container">
<div class="left">this is left</div>
<div class="center">this is center</div>
<div class="right">this is right</div>
</div>
<div class="footer">this is footer</div>

然后是CSS:

 .top{
width: 100%;
height: 40px;
background-color: #cccccc;
}
.footer{
width: 100%;
height: 50px;
background-color: #abdc44;
}
/*左右固定,中间自适应*/
/*Start*/
.container{
width: 100%;
height: 100%;
position: relative;
}
.left{
position: absolute;
left:;
top:;
width: 400px;
height: 800px;
background-color: black;
}
.center{
width: auto; /*如果没有这一句,那么,center这个div的文字就不会自动换行*/
margin: 0 400px;
height: 1000px;
background-color: yellow;
}
.right{
position: absolute;
top:;
right:;
width: 400px;
height: 900px;
background-color: red;
}
/*End*/

最后是这个样子:

纯CSS实现三列布局(两边固定,中间自适应)

上一篇:lua和c#交互备注 : LuaInteractface 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)


下一篇:Windows下使用Kafka