两栏布局和三栏布局的方式常见的

最新推荐文章于 2024-07-24 23:00:08 发布

2401_84152223

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量62

点赞数 1

分类专栏：程序员文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2401_84152223/article/details/138936437

版权

程序员专栏收录该内容

187 篇文章 0 订阅

订阅专栏

}



/* 第二个 */

.boxs {

    width: 100%;

    height: 200px;

    display: flex;

}



.lefts {

    width: 200px;

    height: 100%;

    background-color: rgb(31, 190, 39);

}



.rights {

    flex: 1;

    background-color: aqua;

}

<!-- 第一个 -->

<div class="box">

    <div class="left">



    </div>

    <div class="right">



    </div>

</div>

<!-- 第二个 -->

<div class="boxs">

    <div class="lefts">



    </div>

    <div class="rights">



    </div>

</div>




 三栏布局、(圣杯布局、双飞翼布局) 中间自适应两边固定



> 实现方式

> 

>        1 position 

> 

>        2  float + margin

> 

>        3  display: grid;   grid-template-columns: 300px auto 300px;

> 

>   还有好多 flex ....

<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>Document</title>