页面布局之三栏布局

Posted 2020-11-04 fourteen-y

1.浮动布局

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

<style>
    div{
        min-height:200px;
    }
    .left{
        width: 300px;
        float: left;
        background-color: red;
    }
    .center{
        background-color: yellow;
    }
    .right{
        width: 300px;
        float: right;
        background-color: blue;
    }
</style>

效果：