CSS 常用经典布局 - 三栏布局

原始代码

html部分

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

css部分

body {
    min-width: 630px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}

效果展示

原始效果

最终效果

实现方法

圣杯布局

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

.container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 200px;
}
.center {
    float: left;
}
.left {
    position: relative;
    left: -100px;
    float: left;
    margin-left: -100%;
}
.right {
    position: relative;
    right: -200px;
    float: left;
    margin-left: -200px;
}

双飞翼布局

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

.container {
    overflow: hidden;
}
.center-container {
    float: left;
    width: 100%;
}
.center-container .center {
    margin-left: 100px;    /* 新添加的属性 */
    margin-right: 200px;   /* 新添加的属性 */
    
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
}
.left {
    float: left;
    margin-left: -100%;
}
.right {
    float: left;
    margin-left: -200px;
}

flex 方法

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

.container {
    display: flex;
}
.center {
    flex-grow: 1;   /* flex: 1; 也行 */
    height: 150px;
    background-color: #94E8FF;
}

.left {
    order: -1;
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}