CSS两列布局总结

最新推荐文章于 2024-10-27 15:21:36 发布

Carol小朋友

最新推荐文章于 2024-10-27 15:21:36 发布

阅读量702

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：两列布局

本文链接：https://blog.youkuaiyun.com/lixinyi0622/article/details/84981380

CSS 专栏收录该内容

6 篇文章

订阅专栏

两列布局是左边一栏定宽，右边一栏自适应的布局。

HTML代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="2columns.css"/>
</head>
<body>
<div class="container">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>
</body>
</html>

CSS有以下几种实现方法：

1.左边向左浮动，右边设margin-left

html,body{
    padding:0;
    margin:0;
}
.left{
    float:left;
    width:200px;
    height:300px;
    background-color: red;
}
.right{
    margin-left:200px;
    height:350px;
    background-color: blue;
}

2.左边绝对定位，右边设margin-left

html,body{
    padding:0;
    margin:0;
}
.container{
    position:relative;
}
.left{
    position:absolute;
    left:0;
    width:200px;
    height:300px;
    background-color: red;
}
.right{
    margin-left:200px;
    height:350px;
    background-color: blue;
}

3.加一个父级flex容器，右边flex:1

html,body{
    padding:0;
    margin:0;
}
.container{
    display:flex;
}
.left{
    width:200px;
    height:300px;
    background-color: red;
}
.right{
    flex:1;
    height:350px;
    background-color: blue;
}

4.左边向左浮动，右边触发BFC

html,body{
    padding:0;
    margin:0;
}
.left{
    float:left;
    width:200px;
    height:300px;
    background-color: red;
}
.right{
    overflow:hidden;
    height:350px;
    background-color: blue;
}

以上四种方式都可以呈现出下图布局效果：
在这里插入图片描述