常见布局之三列布局

1.三列布局:两边定宽,中间自适应
css样式部分:

 <style>
    *{
        margin:0;
        padding:0;
    }
    html,body{
        height:100%;
    }
    div{
        float:left;
        height:100%;
    }
    .main{
        background:blue;
        width:100%;
        box-sizing:border-box;
        padding-left:200px;
        padding-right:200px;
    }
    .left{
        background:purple;
        width:200px;
        margin-left:-100%;/*其实就是左边框距离右边的距离为100%*/
    }
    .right{
        background:green;
        width:200px;
        margin-right:-100%;
    }
</style>

html部分:

<body>
    <div class="main">中间的内容</div>
    <div class="left">左边</div>
    <div class="right">右边</div>

</body>

猜你喜欢

转载自blog.csdn.net/Kratial/article/details/82056425
今日推荐