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

简介: CSS实战笔记(十) 自适应双栏布局
+关注继续查看

前言


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;
}

目录
相关文章
|
1天前
|
前端开发 容器
css极速入门 —— grid布局
css极速入门 —— grid布局
20 1
|
8天前
|
容器
|
8天前
|
前端开发 容器
今天来谈谈CSS有哪些布局
今天来谈谈CSS有哪些布局
|
8天前
|
开发者 容器
|
18天前
|
前端开发 容器
前端CSS居中布局
前端CSS居中布局
50 0
|
1月前
|
前端开发
CSS布局讲解-float浮动布局使用
CSS布局讲解-float浮动布局使用
|
1月前
|
容器
粉丝提问篇之css3的多列布局与p标签结合出现的样式
粉丝提问篇之css3的多列布局与p标签结合出现的样式
15 0
|
1月前
|
Web App开发 设计模式 前端开发
DIV+CSS布局总结
DIV+CSS布局总结
|
1月前
|
前端开发 容器
css的布局方式有哪些,有什么优缺点
css的布局方式有哪些,有什么优缺点
14 0
|
1月前
|
前端开发 UED 容器
css中的布局方式与各自优缺点
css中的布局方式与各自优缺点
14 0
相关产品
云迁移中心
推荐文章
更多