css两栏布局-CSS实现左右布局、三栏布局

bendan520 2023年8月29日 css 0

css的两列布局是比较经典的布局之一，通常是左（右）边固定宽度，右（左）边自适应。

实现的方式也有很多种，明天主要介绍三种。

1.浮动模式，让第一个div向上浮动脱离文档流，下面的div自动向上

<body>
        <div class="left">左边</div>
        <div class="right">右边</div>
</body>

.left {
    width: 200px;
    height: 400px;
    background: yellow;
    float: left;
}
            
.right{
    height: 400px;
    background: #0000FF;
}

2、绝对定位法

这种技术的原理就是将两侧的div设置为position:absolutecss两栏布局，即两侧的默认长度css两栏布局，并将margin-left设置为与两侧的div一样宽（如果要留间隙，则可以小于左边div的长度）

<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>

.left {
    width: 200px;
    height: 400px;
    background: yellow;
    position: absolute;
}
            
.right {
    height: 400px;
    background: #ccc;
    margin-left: 200px;
}

3. 弹性盒。 显示：柔性； 设置为弹性袋，其子元素可以通过设置flex的值来控制空间比例

css两栏布局_div+css布局实例_div+css布局视频教程

<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>


    body{
        display: flex;
    }
    .left {
        width: 200px;
        height: 400px;
        background: yellow;
    }
            
    .right {
        height: 400px;
        background: #ccc;
        flex: 1;
    }

三列布局

三列自适应布局是指两侧固定宽度，中间自适应长度

1、绝对定位法

div+css布局视频教程_css两栏布局_div+css布局实例

原则是两侧绝对定位。 因为绝对定位使其脱离了文档流，所以旁边的中心自然会流入其中。 然后利用margin属性留下左右元素的长度，让中间元素自适应。

<body>
    <div class="left">左边</div>
    <div class="center">中间</div>
    <div class="right">右边</div>
</body>

        
            *{
                margin: 0;
                padding: 0;
            }
            .left{
                position: absolute;
                height: 400px;
                width: 400px;
                left: 0;
                top: 0;
                background: yellow;
                
            }
            .center{
                height: 400px;
                background: blueviolet;
            }
            .right{
                position: absolute;
                top: 0px;
                right: 0px;
                height: 400px;
                width: 400px;
                background: yellowgreen;
            }

2.浮动定位

自浮动定位的原理是使用float:left和float:right，float使左右元素脱离文档流，中间元素正常在文档流内。 使用边距指定左右外部距离来定位它。

css两栏布局_div+css布局实例_div+css布局视频教程

<body>
    <div class="left">左边</div>        
    <div class="right">右边</div>
    <div class="center">中间</div>
</body>

        
            *{
                margin: 0;
                padding: 0;
            }
            .left{
                width: 300px;
                height: 300px;
                background: #DEB887;
                float: left;
            }
            .center{
                height: 300px;
                background: #008000;
                margin: 0 310px;
            }
            .right{
                width: 300px;
                height: 300px;
                background: #DEB887;
                float: right;
            }

三个元素的顺序，中心必须放在口处，中心占据了文档流的位置，所以必须放在最后。 左右元素的位置并不重要。 当浏览器窗口较小时，右侧元素将被挤到下一行

3.flex布局方法

从视觉上看，这应该是未来主流的布局形式

div+css布局实例_div+css布局视频教程_css两栏布局

用盒子包裹三列，设置容器display:flex，左右列固定长度300px，中间列设置flex:1，其中1代表长度比例列，具体值取决于其他包袋的弹性值。 由于这里的其他袋子都是固定长度的，所以中间的一栏将被手动填充。

<body>
        <div id="box">
            <div class="left">左边</div>        
            <div class="center">中间</div>
            <div class="right">右边</div>        
        </div>
</body>

        
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                display: flex;
                height: 300px;
            }
            .left{
                width: 300px;
                height: 300px;
                background: #DEB887;
            }
            .center{
                height: 300px;
                background: #008000;
                flex: 1;
            }
            .right{
                width: 300px;
                height: 300px;
                background: #DEB887;
            }

本文没有图片，读者可以自行尝试

相关文章：