CSS实现左右布局，三栏布局

最新推荐文章于 2024-04-11 16:30:18 发布

weixin_34090643

最新推荐文章于 2024-04-11 16:30:18 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/ronyjay/p/8794833.html

版权

css的两栏布局是比较经典的布局之一，一般是左（右）边定宽，右（左）边自适应。

实现的方式也比较多，今天主要介绍3种。

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:absolute，右侧默认宽度，并将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.弹性盒。display:flex; 设置为弹性盒子，其子元素可以通过设置flex的数值来控制所占空间比例

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

<style type="text/css">
    body{
        display: flex;
    }
    .left {
        width: 200px;
        height: 400px;
        background: yellow;
    }
            
    .right {
        height: 400px;
        background: #ccc;
        flex: 1;
    }
</style>

三栏布局

三列自适应布局指的是两边定宽，中间宽度自适应

1.绝对定位法

原理是将两边absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到上面，然后使用margin属性，留出左右元素的宽度，使中间的元素自适应。

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

        <style type="text/css">
            *{
                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;
            }
        </style>

2.浮动定位

自身浮动定位的原理是使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在文档流中。使用margin指定左右外边距对其进行定位。

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

        <style type="text/css">
            *{
                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;
            }
        </style>

三个元素的顺序，center一定要放在嘴和，center占据文档流位置，所以一定要放到最后，左右两个元素位置没有关系，当浏览器窗口很小的时候，右边元素会被挤到下一行

3.flex布局法

目测这应该是未来主流的布局方式

用一个box包裹三栏，设置容器display:flex，左右栏固定宽度300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其他盒子的flex值。由于这里其他盒子宽度固定，所以中间栏会自动填充。

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

        <style type="text/css">
            *{
                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;
            }
        </style>

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

转载于:https://www.cnblogs.com/ronyjay/p/8794833.html

weixin_34090643

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现左右布局，三栏布局

css的两栏布局是比较经典的布局之一，一般是左（右）边定宽，右（左）边自适应。实现的方式也比较多，今天主要介绍3种。1.浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上<body> <div class="left">左边</div> <div class="right">右边&lt...
复制链接

扫一扫