三栏布局的实现方式

最新推荐文章于 2023-10-01 20:09:08 发布

Augenstern、

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量116

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/m0_46364033/article/details/107540978

版权

两列定宽，一列自适应。以下代码基本上以左右两列定宽，中间自适应为例：

1. 使用浮动float实现

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .right{
            width: 300px;
            height: 200px;
            background-color: seagreen;
            float: right;
        }
        .center{
            background-color: skyblue;
            height: 200px;
        }
    
</style>

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

2. 使用position，父级div设置position：relative，三个子级div设置position：absolute，这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
        }
        .container>div{
            position: absolute;
            height: 300px;
        }
        .left{
            left:0;
            width: 300px;
            background-color: red;
        }
        .right{
            right: 0;
            width: 300px;
            background-color: seagreen;
        }
        .center{
            right: 300px;
            left: 300px;
            background-color: skyblue;
        }
    </style>

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

3. 使用flex实现，flex的兼容性不是很好

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
        }
        .left{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .center{
            flex: 1;
            background-color: skyblue;
        }
        .right{
            width: 300px;
            background-color: seagreen;
        }
    </style>
    
<div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>

4. 使用table实现，这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: table;
            border-spacing: 10px; /* 可设置间距，看需求 */
            width: 100%;
            height: 300px;
        }
        .container>div{
            display:table-cell;
        }
        .left{
            width: 300px;
            /* margin-right: 20px; 无效 */
            background-color: red;
        }
        .center{
            background-color: skyblue;
        }
        .right{
            width: 300px;
            background-color: seagreen;
        }
    </style>

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

5. 使用grid网格布局实现

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: grid;
            grid-template-columns: 300px auto 300px;
            /* grid-template-columns: 300px 300px auto; 咨询选择自适应列 */
            width: 100%;
            height: 300px; /* 这里也可以用：grid-template-rows 来代替行高 */
        }
        .container>div{
            display:table-cell;
        }
        .left{
            background-color: red;
        }
        .center{
            background-color: skyblue;
        }
        .right{
            background-color: seagreen;
        }
    </style>

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

使用float+overflow，这里两个盒子浮动，另一个盒子触发bfc达到自适应；此方法使得右边列自适应

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container>div{
            height: 300px;
        }
        .left{
            float: left;
            width: 300px;
            background-color: red;
        }
        .center{
            float: left;
            width: 300px;
            background-color: skyblue;
        }
        .right{
            overflow:hidden;
            background-color: seagreen;
        }
    </style>

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

以上几种方法实现的三列布局基本上都是将整个屏幕的宽度铺满，并且列与列之间没有距离，如有需要，自行添加。

Augenstern、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三栏布局的实现方式

两列定宽，一列自适应。以下代码基本上以左右两列定宽，中间自适应为例：1. 使用浮动float实现<style> *{ margin: 0; padding: 0; } .left{ width: 300px; height: 200px; background-color: red; float: le
复制链接

扫一扫