css实现两栏经典布局

野生小米椒

已于 2022-05-13 16:09:10 修改

阅读量231

点赞数

分类专栏：三大基础语言文章标签： css css3 html

于 2020-09-08 18:14:05 首次发布

本文链接：https://blog.csdn.net/x1037490413/article/details/108474174

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

文章目录

一：

1.定位absolute,给灰色区域让位置
2.让一个元素把自身的元素让出来(margin-right),不要压住另一个元素
3.注意:两个div不能交换顺序,如果灰色div先出生,粉色区域再出生.粉色区域调完position之后,*虽然定义了absolute,脱离原来位置,但是出身的位置原本就是第二行,不会再到第一行去了灰色区域没有让给它位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="right"></div>
    <div class="left"></div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .right {
        position: absolute;
        right: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 半透明 ,方便查看是否被gray覆盖*/
        opacity: 0.5;
    }

    .left {
        height: 100px;
        background-color: gray;
        margin-right: 100px;
    }
</style>

</html>

二：两栏布局(左侧固定宽度，右侧自适应)

<!-- HTML结构 -->
<div class="wrap">
    <div class="left">
        左侧固定内容
    </div>
    <div class="right">
        右侧内容自适应
    </div>
</div>

1.使用浮动—float

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    overflow: hidden;
    border: 1px solid red;
}
/* 脱离文档流 */
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

2.使用绝对定位实现—absolute

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    overflow: hidden;
    position: relative;
}
/* 脱离文档流 */
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

3.使用表格布局—table

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 表格布局 */
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    display: table-cell;
    background: skyblue;
    height: 200px;
}

5.使用calc()函数

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 双float */
.wrap {
    overflow: hidden;
}

.left {
    float: left;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    float: left;
    background: skyblue;
    height: 200px;
    width: calc(100% - 200px);
}

6.使用inline-block和calc()函数

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 双float */
.wrap {
    overflow: hidden;
    width: 100%;
    font-size: 0;
}

.left {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: purple;
    font-size: 20px;
}

.right {
    display: inline-block;
    background: skyblue;
    height: 200px;
    width: calc(100% - 200px);
    font-size: 20px;
}

三：使用弹性布局—flex

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
.wrap {
    display: flex;
}
.left {
    height: 200px;
    background: purple;
    flex:0 0 200px
}
.right {
    background: skyblue;
    height: 200px;
    flex: 1;
}

野生小米椒

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css实现两栏经典布局

1.定位absolute,给灰色区域让位置2.让一个元素把自身的元素让出来(margin-right),不要压住另一个元素3.注意:两个div不能交换顺序,如果灰色div先出生,粉色区域再出生.粉色区域调完position之后,*虽然定义了absolute,脱离原来位置,但是出身的位置原本就是第二行,不会再到第一行去了灰色区域没有让给它位置<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫