css三栏布局方法

最新推荐文章于 2024-09-17 22:59:44 发布

树枝上的麻雀

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量156

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_38658583/article/details/124470214

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

css三栏布局方法

1.float
2.flex
3.table

         .wrap > div {height: 100px; text-align: center; line-height: 100px; }

1.float

使用float注意清除浮动
清除浮动有三种

父盒子使用overflow:hidden，但是超出区域会被隐藏
浮动的盒子下方加一个标签 clear:both
伪元素清除浮动父元素添加class

 .clear:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }

        .float .left {
            width: 200px;
            float: left;
            background-color: pink;
        }
        .float .center {
            background-color: green;
        }
        .float .right {
            width: 200px;
            float: right;
            background-color: orange;
        }
 <div class="float wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

2.flex

flex 的设置宽度和中间自适应具体是哪个属性
flex :flex-grow flex-shrink flex-basis
放大缩小固定值
0 1 auto

.flex {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
        }
        .flex .left {
            width: 200px;
            background-color: lightblue;
        }
        .flex .center {
            flex: 1;
            background-color: lightsalmon;
        }
        .flex .right {
            width: 200px;
            background-color: lawngreen;
        }
        <div class="flex wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

3.table

 .table {
            display: table;
            width: 100%;
        }
        .table > div {
            display: table-cell;
        }
        .table .left {
            width: 200px;
            background-color: lavenderblush;

        }
        .table .center {
            background-color: lightseagreen;
        }
        .table .right {
            width: 200px;
            background-color: lightcoral;
        }
        <div class="table wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>