CSS两列布局

最新推荐文章于 2023-02-10 20:30:00 发布

胖玖

最新推荐文章于 2023-02-10 20:30:00 发布

阅读量191

点赞数

分类专栏： HTML/CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Feb_ruary/article/details/110389217

版权

HTML/CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS两列布局

1、左列定宽,右列自适应

（1）利用float+margin(fix)实现

<body>
    <div class="left">左列定宽</div>
    <div class="right-fix">
        <div class="right">右列自适应</div>
    </div>
</body>

.left{
    background-color: orange;
    float: left;
    width: 100px;
    height: 300px;
}

.right-fix{
    float: left;
    width: 100%;
    margin-left: -100px;
}

.right{
    background-color: #bbffaa;
    height: 300px;
    margin-left: 100px;
}

（2）使用float+overflow实现

<body>
    <div class="left">左列定宽</div>
    <div class="right">右列自适应</div>
</body>

.left{
    background-color: orange;
    float: left;
    width: 100px;
    height: 300px;
}

.right{
    background-color: #bbffaa;
    height: 300px;
    overflow: hidden;
}

（3）使用table实现
margin失效；设置间隔比较麻烦

<body>
    <div class="content">
        <div class="left">左列定宽</div>
        <div class="right">右列自适应</div>
    </div>
</body>

.content{
    width: 100%;
    display: table;
    height: 300px;
}

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

.right{
    background-color: #bbffaa;
}

.left,.right{
    /*利用单元格自动分配宽度*/
    display: table-cell;
}

（4）使用绝对定位

.content{
    position: relative;
}

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: orange;
}

.right{
    position: absolute;
    top: 0;
    left: 100px;  /*值大于等于.left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

（5）使用flex实现。

.content{
    width: 500px;
    height: 500px;
    display: flex;
}

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

.right{
    /* 均分父元素剩余空间 */
    flex: 1;
    background-color: palegreen;
}

（6）使用Grid实现

.content{
    width: 600px;
    height: 500px;
    display: grid;
    /*设定2列,auto换成1fr也行*/
    grid-template-columns: 100px auto;
}

.left{
    background-color: orange;
}

.right{
    background-color: palegreen;
}

2、左列自适应,右列定宽

（1）使用float+margin实现

.content{
    height: 300px;
    /*抵消#left的margin-left,
    达到#parent可在屏幕上显示完整，即水平居中*/
    padding-left: 100px;
}

.left{
    float: left;
    height: 300px;
    width: 100%;
    margin-left:-100px;
    background-color: orange;
}

.right{
    float: right;;
    width: 100px;
    height: 300px;
    background-color: palegreen;
}

（2）使用float+overflow实现

<div class="content">
        <!-- 顺序一定是right在前 -->
        <div class="right">右列定宽</div>
        <div class="left">左列自适应</div>
</div>

.left{
    overflow: hidden;
    height: 300px;
    background-color: orange;
}

.right{
    margin-left: 10px;
    float: right;
    width: 100px;
    height: 300px;
    background-color: palegreen;
}

（2）使用绝对定位实现

.content{
    position: relative;
}
.left{
    position: absolute;
    top: 0;
    left: 0;
    /*大于等于#rigth的宽度*/
    right: 100px;
    height: 300px;
    background-color: orange;
}

.right{
    position: absolute;
    top: 0;
    right: 0;
    height: 300px;
    width: 100px;
    background-color: palegreen;
}

3、一列不定,一列自适应

(盒子宽度随着内容增加或减少发生变化,另一个盒子自适应)
（1）使用float和overflow

.left{
    float: left;
    height: 300px;
    background-color: orange;
}

.right{
    /* 开启BFA，使元素不会被浮动元素覆盖 */
    overflow: hidden;
    height: 300px;
    background-color: palegreen;
}

（2）使用Flex实现

.content{
    display: flex;
}

.left{
    /* 不设置宽度 */
    height: 300px;
    background-color: orange;
}

.right{
    flex: 1;
    height: 300px;
    background-color: palegreen;
}

（3）使用Grid实现。

.content{
    display: grid;
    /* 左侧不定宽，右侧自适应 */
    grid-template-columns: auto 1fr;
}

.left{
    height: 300px;
    background-color: orange;
}

.right{
    height: 300px;
    background-color: palegreen;
}

胖玖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS两列布局

CSS两列布局1、左列定宽,右列自适应（1）利用float+margin(fix)实现<body> <div class="left">左列定宽</div> <div class="right-fix"> <div class="right">右列自适应</div> </div></body>.left{ background-color: orange
复制链接

扫一扫