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

原始代码

html 部分

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

css 部分

.left {
    width: 100px;
    height: 100px;
    background-color: #FFB5BF;
}
.right {
    height: 100px;
    background-color: #94E8FF;
}

效果展示

原始效果

最终效果

实现方法

使用 float

第一种方法

.container {
    overflow: hidden;   /* 清除浮动 */
}
.left {
    float: left;
}
.right {
    margin-left: 100px;   /* 为 .left 留出空间 */
}

第二种方法

.container {
    overflow: hidden;
}
.left {
    float: left;
}
.right {
    float: left;
    width: calc(100% - 100px);   /* 计算宽度，运算符号左右一定要有空格 */
}

第三种方法

.container {
    overflow: hidden;
}
.left {
    float: left;
}
.right {
    overflow: auto;   /* 形成 BFC */
}

使用 inline-block

.container {
    font-size: 0;   /* 消除间距 */
}
.left, .right {
    display: inline-block;
}
.right {
    width: calc(100% - 100px);
}

使用 absolute

.container {
    position: relative;
}
.left {
    position: absolute;   /* 脱离文档流 */
}
.right {
    margin-left: 100px;
}

使用 flex

.container {
    display: flex;
}

.right {
    flex-grow: 1;   /* flex: 1; 也行 */
}

使用 grid

.container {
    display: grid;
    grid-template-columns: 100px auto;   /* 声明列的宽度 */
}

使用 table

.container {
    display: table;
    width: 100%;
}
.left {
    display: table-cell;   /* 类似于表单元格 */
}
.right {
    display: table-cell;
}

版权声明

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议 ，转载请注明出处！