CSS——三栏布局

最新推荐文章于 2024-07-16 15:32:05 发布

我爱学习&&学习爱我

最新推荐文章于 2024-07-16 15:32:05 发布

阅读量69

点赞数

分类专栏： CSS知识学习文章标签： css html webview

本文链接：https://blog.csdn.net/qq_51172685/article/details/122547220

版权

CSS知识学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html模板如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS测试</title>
    <link rel="stylesheet" href="./test.css">
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

</html>

1.float实现

此处center并未脱离标准流，故可以撑开父盒子，故不需要清除浮动

*{
    margin: 0;
    padding: 0;
}

.left {
    float: left;
    width: 200px;
    height: 300px;
    background-color:red;
}

.right {
    float: right;
    width: 200px;
    height: 300px;
    background-color:red;

}

.center {
    margin:0 200px 0;
    height: 300px;
    background-color: pink;
}

2.position实现

如果宽度采用auto，那么必须指定其参考位置，也就是说对于绝对定位，最好指定left\right\top\bottom的值

*{
    margin: 0;
    padding: 0;
}

.left {
    position: absolute;
    left: 0;
    width: 200px;
    height: 300px;
    background-color:red;
}

.right {
    position: absolute;
    right: 0;
    width: 200px;
    height: 300px;
    background-color:red;

}

.center {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 300px;
    background-color: pink;
}
.outer {
    position: relative;
}

3.flex实现

为什么不容指定子元素的height？因为交叉轴默认是stretch也就是自动填充

为什么不用指定center的width？因为flex：1这个属性让center盒子变得具有了弹性可以自动填充剩余空间（也就是变得有弹性了）

*{
    margin: 0;
    padding: 0;
}

.left {

    width: 200px;
    background-color:red;
}

.right {
    order: 2;
    width: 200px;
    background-color:red;

}

.center {
    order: 1;
    flex: 1;
    background-color: pink;
}
.outer {
    display: flex;
    height: 300px;
}

https://www.jb51.net/css/589861.html，这个博主写的很全

4.双飞翼布局

摘自：CSS浮动-5.4实战案例-三列布局-使用双飞翼布局---不理解为啥？？太难了_say hi.的博客-CSDN博客

也是大厂面试中经常考察的知识点。】
第一步：使用float属性让左中右三列浮动
第二步：使用负margin属性让左右两列与中间列处于同一水平线上
第三步：在中间列增加一个div内容元素，设置margin值为左(left)右(right)两列的宽度
最后，别忘了清除浮动，让父元素高度正常显示

双飞翼布局的优点：
1.中间内容列宽度自适应
2.中间内容区域优先加载
（因为，我们把中间列放在了第一个子元素的位置，它的左右都在其下边）
3.使用浮动布局
4.巧妙使用负margin属性保持三列水平
（我们设置了center 的 width: 100%; 左右两侧会被挤下去，因为他们三列都是浮动的嘛）
5.方法简单直接
6.浏览器兼容性好

.center {
    float: left;
    width: 100%;
    height: 100px;
    background-color: pink;
}

.content {
    margin-left: 200px;
    margin-right: 200px;
}

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



.father {
    border: orangered 1px solid;
}

/* 清除浮动 */
.father:after {
    display: block;
    height: 0;
    content: '';
    clear: both;
}

我爱学习&&学习爱我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——三栏布局

html模板如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
复制链接

扫一扫

专栏目录