CSS 常见两列布局、三列布局

最新推荐文章于 2023-09-02 17:54:55 发布

转载最新推荐文章于 2023-09-02 17:54:55 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hongchenzimo/p/11026429.html

本文详细介绍了网页设计中常见的两列和三列布局实现方法，包括使用position、float和flex布局等技术，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、两列布局：

　方法一：采用position：absollute;并设置margin-left的值。

#left{
    position:absolute;
    width:300px;
    top:0px;
    left:0px;
    background:#F00;
}

#right{
    background:#0FC;
    margin-left:300px;
}
<div id="left">左边定宽</div> <div id="right">右边自适应</div>

方法二：采用float;并设置overflow:auto;(隐藏溢出的内容)　

#left {
    float: left;
    width: 300px;
    background-color: blue;
}
#right {
    overflow: auto;
    background-color: red;
}

<div id="left">左边自适应</div>
<div id="right">右边定宽</div>

方法三：使用flex布局的写法

.content{
    display:flex;
}
.aside.left{
    border:5px solid black;
    width:200px;
}
.aside.main{
    flex-grow:1;
    border:5px solid red;
}
.aside {
    height:600px;
}
<div class="content">
    <div class="aside left"></div>
    <div class="aside main"></div>
</div>

二、三列布局

方法一：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;

中间设置margin-left和margin-right即可.

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    position:absolute;
    width: 300px;
    top:0;
    background-color: #0FC;
}
#left{
    left:0;
}
#right{
    right:0;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左边定宽</div>
<div id="main">中间自适应</div>
<div id="right">右边定宽</div>

方法二：左右采用float,中间设置 overflow:auto;和margin:0 300px;

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    float:left;
    width: 300px;
    background-color: #0FC;
}
#right{
    overflow:auto;
    float:right;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左边定宽</div>
<div id="right">右边定宽</div>
<div id="main">中间自适应</div>

方法三：使用flex布局的写法

.content{
    display:flex;
}
.aside.left{
    order:1;
    border:5px solid black;
    width:200px;
}
.aside.left{
    order:3;
    border:5px solid black;
    width:200px;
}
.aside.main{
    order:2;
    flex-grow:1;
    border:5px solid red;
}
.aside {
    height:600px;
}
<div class="content">
    <div class="aside left"></div>
    <div class="aside right"></div>
    <div class="aside main"></div>
</div>

转载于:https://www.cnblogs.com/hongchenzimo/p/11026429.html