css中两列布局，三列布局实现方法

是Mary呀～

已于 2022-05-16 18:01:48 修改

阅读量1.8k

点赞数 2

文章标签： css elementui 前端

于 2022-05-15 22:52:37 首次发布

本文链接：https://blog.csdn.net/qq_51489068/article/details/124781477

版权

1.两边左右浮动，中间结合margin：0 auto；

2.两边定宽，中间自适应---子元素都左浮动float：left；

3.行内块级显示--给每一块元素设置为行内块级元素

4.父元素：display:flex,子元素全部flex:1;

5.父元素flex布局+左右定宽+中间元素flex:1;

6.绝对定位实现

两列布局

1.左边定宽浮动，右边自适应

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

<style>
    .left{
        width: 300px;
        background-color: pink;
        float: left;
        /* 透明度 */
        /* opacity: 0.5; */
    }
    .right{
        width: calc(100%-300px);
        background-color: green;
        /* float: left; */
    }
</style>

效果图：

2.flex布局设置

<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>


<style>
    .father{
        border: 1px solid black;
        display: flex;
    }
    .one{
        width: 200px;
        height: 200px;
        background-color: red;
        flex: 1;
    }
    .two{
        width: 200px;
        height: 200px;
        background-color: yellow;
        flex: 1;
    }
</style>

效果图：

三列布局

1.两边左右浮动，中间结合margin：0 auto；

<body>
    <!-- 注意下面样式的顺序，决定了解析顺序 -->
    <div class="first">左边</div>
    <div class="third">右边</div>
    <div class="second">中间</div>
</body>

<style>
    /* 所有元素依然符合块级元素宽占比100%的特性 */
    /* 左右=100px+100px
        左右设置了浮动  所以他们分别位于左右两边  页面此时只剩中间位置了
        剩余中间=100%-200px
    */
    *{
        margin: 0;
        padding: 0;
    }
    .first,.third{
        width: 300px;
        height: 800px;
        background-color:pink;
    }
    .first{
        float: left;
    }
    .third{
        float: right;
    }
    .second{
        background-color: green;
        /* margin: 0 auto; */
        width: calc(100%-600px);
        height: 800px;
    }

效果图：

2.两边定宽，中间自适应---子元素都左浮动float：left；

<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>


<style>
    /* 两边定宽，中间自适应 */
    .father{
        border: 1px solid black;
        width: 100%;
        height: 200px;
    }
    .one{
        width: 100px;
        height: 200px;
        background-color: rgb(47, 207, 235);
        float: left;
    }
    
    .two{
        width: calc(100% - 200px);
        background-color: rgb(69, 245, 38);
        height: 200px;
        float: left;
    }
    .three{
        width: 100px;
        height: 200px;
        background-color: rgb(194, 30, 170);
        float: left;
    }
</style>

3.行内块级显示--给每一块元素设置为行内块级元素

<body>
    <!-- 不能换行，浏览器会解析 -->
    <div class="first">左边</div><div class="second">中间</div><div class="third">右边</div>
</body>

<style>
    .first{
        width: 300px;
        height: 100px;
        background-color:pink;
        /* 使得块级元素变为行内元素 */
        /* 将设置为行内块级显示后，与其他元素显示一行，但是宽高只是可以设置 */
        /* 行内元素宽高是要内容撑起，所以一定要设置文字 */
        display: inline-block;
    }
    .second{
        /* 加减乘除符号前后要加空格 */
        width: calc(100% - 600px);
        height: 100px;
        background-color: red;
        display: inline-block;
    }
    .third{
        width: 300px;
        height: 100px;
        background-color: blue;
        display: inline-block;
    }
</style>

效果图：

4.父元素：display:flex,子元素全部flex:1;

三列布局：父元素：display:flex
子元素： flex:1;

<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>


<style>
    .father{
        border: 1px solid black;
        display: flex;
        height: 200px;
    }
    .one{   
        background-color: red;
        /* flex:1 === flex: 1 1 0px */
        /* 当flex为1时，占满剩余宽度的一份（一份是多少取决于总宽度-固定宽度之和/几份*所占份数） */
        flex: 1;
    }
    .two{
        background-color: blueviolet;
        flex: 1;
    }
    .three{        
        background-color: burlywood;
        flex: 1;
    }
</style>

效果图：

5.父元素flex布局+左右定宽+中间元素flex:1;

<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>


<style>
    /* 父元素flex布局+左右定宽+中间元素flex:1 */
    .father{
        display: flex;
        border: 1px solid black;
        height: 200px;
    }
    .one{
        width: 100px;
        background-color: red;

    }
    .three{
        width: 100px;
        background-color: yellow;
    }
    .two{
        flex: 1;
        background-color: green;

    }
</style>

6.绝对定位实现

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


<style>
    .content{
        width: 100%;
        height: 400px;
        border: 1px solid black;
    }
    .left{
        position: absolute;
        width: 200px;
        height: 400px;
        /* 为了使在同一线上 */
        top: 1;
        left: 0;
        background: yellow;
    }
    .right{
        position: absolute;
        width: 200px;
        height: 400px;
        right: 0;
        top: 0;
        background: blue;
        margin-top: 9px;
    }
    .center{
        height: 400px;
        /* margin: 0 200px 0 200px; */
        margin: 0 200px;
        background:red;
        top: 0;
    }
</style>