【css】css实现div两列布局（固定和自适应）（两种方法）

最新推荐文章于 2024-06-11 12:15:54 发布

婧大

最新推荐文章于 2024-06-11 12:15:54 发布

阅读量9.1k

点赞数 6

分类专栏：前端CSS 文章标签： css 定位

本文链接：https://blog.csdn.net/qq_45678607/article/details/108101265

版权

前端CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

1.实现目标

左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应

2、思路

1、让两个div并排到一行

div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；

2、一个div宽度固定，另一个div自适应剩下的宽度

对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。

3、实现

1、左侧绝对定位，脱离文档流，对右侧设置margin-left,
可以使两者水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 300px;
            background: #ff0000;
            height: 400px;
            /*position: absolute;!* fixed *!*/
        }
        #right{
            background: #00ff00;
            height: 400px;
            margin-left: 310px;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

2、利用弹性盒模型，flex-grow=1,让剩下的元素使用剩余空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 300px;
            background: #ff0000;
            height: 400px;
        }
        #right{
            background: #00ff00;
            height: 400px;
            flex-grow: 1;
            margin-left: 10px;
        }
        #main{
            display: flex;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

婧大

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
【css】css实现div两列布局（固定和自适应）（两种方法）

css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）1.实现目标左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应2、思路1、让两个div并排到一行div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；2、一个div宽度固定，另一个div自适应剩下的宽度对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属
复制链接

扫一扫

专栏目录