CSS实战笔记(十) 自适应双栏布局

最新推荐文章于 2024-02-01 16:12:44 发布

半虹

最新推荐文章于 2024-02-01 16:12:44 发布

阅读量579

点赞数 1

分类专栏： CSS 文章标签： CSS 自适应双栏布局

本文链接：https://blog.csdn.net/wsmrzx/article/details/105059245

版权

CSS 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

自适应双栏布局是常见的布局之一，页面上有两列内容，一栏由内容撑开，另一栏自动撑满剩余宽度

1、通过 BFC 实现

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>

.wrap {
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}
.left {
    background-color: lightskyblue;
    /* float + margin */
    float: left;
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}

2、通过 Flex 实现

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>

.wrap {
    /* flex container */
    display: flex;
}
.left {
    background-color: lightskyblue;
    /* flex item */
    flex-grow: 0;
    /* margin */
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* flex item */
    flex-grow: 1;
}

3、通过 Grid 实现

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>

.wrap {
    /* grid container */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 20px;
}
.left {
    background-color: lightskyblue;
}
.right {
    background-color: deepskyblue;
}