CSS七种三栏布局

1. 流体布局(浮动布局)

• 布局的时候，浮动元素必须写在前面

.left {
    float: left;
    width: 100px;
    height: 100px;
    backgound-color: red;
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background-color: green;
}
.main {
    margin-left: 100px;
    margin-right: 100px;
    height: 100px;
    background-color: yellow;
}

<div class="left"> </div>
<div class="right"> </div>
<div class="main"> </div>

测试用例

2. BFC三栏布局

• 布局的时候，浮动元素必须写在前面

.left {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: green;
}
.main {
    height: 100px;
    overflow: hidden;
    background-color: yellow;
}
<div class='container'>
    <div class='left'></div>
    <div class='right'></div>
    <div class='main'></div>
</div>

测试用例

3. 双飞翼布局

.content {
    float: left;
    width: 100%;
}
.main {
    height: 100px;
    margin-left: 120px;
    margin-right: 120px;
    background-color: red;
}

// 清除浮动
.main::after {
    display: block;
    content: '';
    height: 0;
    font-size: 0;
    clear: both;
    zoom: 1;
}

.left {
    float: left;
    margin-left: -100%;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.right {
    float: right;
    margin-left: -100px;
    width: 100px;
    height: 100px;
    background-color: yellow;
}


<div class='content'>
    <div class='main'></div>
</div>
<div class='left'></div>
<div class='right'></div>

测试用例

4.圣杯布局

.container {
    margin-left: 120px;
    margin-right: 120px;
}

.main {
    float: left;
    width: 100%;
    height: 100px;
    background-color: red;

}
.left {
    float: left;
    margin-left: -100%;
    height: 100px;
    width: 100px;
    position: relative;
    left: -100px;
    background-color: green;
}
.right {
    float: right;
    margin-left: -100px;
    height: 100px;
    width: 100px;
    position: relative;
    right: -100px;
    background-color: yellow;
}


<div class='container'>
    <div class='main'></div>
    <div class='left'></div>
    <div class='right'></div>
</div>

测试用例

5.flex布局

.container {
    display: flex;
}
.main {
    flex: 1;
    height: 100px;
    background-color: yellow;
}
.left {
    order: -1; // 为了使中间布局那一栏优先加载
    height: 100px;
    width: 100px;
    background-color: red;
}
.right {
    height: 100px;
    width: 100px;
    background-color: blue;
}

<div class='container'>
    <div class='main'></div>
    <div class='left'></div>
    <div class=''right></div>
</div>

6. table布局

.container {
    display: table;
    width: 100%;
}

.left, .main, .right {
    display: table-cell;
}

.left {
    width: 100px;
    height: 100px;
    background-color: red;
}

.main {
    background: green;
}

.right {
    width: 150px;
    height: 100px;
    background-color: yellow;
}


<div class='container'>
    <div class='left'></div>
    <div class='main'></div>
    <div class='right'></div>
</div>

测试用例

7. 绝对定位布局

.container {
    positoion: relative;
}
.main {
    heigth: 100px;
    background-color: red;
    margin: 0 100px;
}
.left,
.rigth {
    postition: absolute;
    top: 0;
    background-color: green;
} 
.left {
    left: 0;
    background-color: yellow;
}
.right {
    right: 0;
}

<div class='container'>
    <div class='main'></div>
    <div class='left'></div>
    <div class='right'></div>
</div>

测试用例