css常用布局两栏、三栏布局

最新推荐文章于 2023-10-25 21:32:24 发布

Hell's Angel

最新推荐文章于 2023-10-25 21:32:24 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML、css 文章标签： css3

本文链接：https://blog.youkuaiyun.com/NET_worker_/article/details/108270809

HTML、css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS布局中常见的两栏和三栏布局方式，包括使用float、绝对定位、flex布局等方法。详细阐述了每种布局的实现思路，如通过margin自动对齐、绝对定位调整位置、flex布局简化操作等，提供了多种解决此类布局问题的方案。

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

我们在做pc端页面的时候、经常会用到这种布局、即两栏、三栏布局。

如图所示：
在这里插入图片描述

这两种经典布局相信很多人都用过把。

现在分享一下我的布局方案吧（每个人布局风格不同自然想法就不一样了。）

两栏布局：
1、左（右）侧固定宽度：中间部分使用margin-left或margin- right（默认为auto）使之铺满右侧部分。

<div class="parent">
        <div class="left">111</div>
        <div class="right">222</div>
    </div>

.parent{
height: 400px;
overflow: hidden;
}
.left{
    float: left;
    height: 100%;
    width: 200px;
    background: yellow;
}
.right{
    height: 100%;
    margin-left: 200px;
    background: lawngreen;;
}

在这里插入图片描述

侧边使用 float：left属性中间盒子自动尾随其后设置margin-left：200px 实现对齐。

2、使用绝对定位：


.left{
    
   position:absolute;
   left:0;
    width: 200px;
    background: yellow;
}
.right{
   
    margin-left: 200px;
    background: lawngreen;;
}

3、flex布局：

.parent:{display:flex}
.left{flex:0 0 200px;}
.right{ flex: 1 1;}

三栏布局：
1、绝对定位左右两侧盒子设置position：absolute

.left{
    width: 200px;
    height: 300px;
    top: 0;left: 0;
   position: absolute;
    background: yellow;
}
.middle{
    height: 300px;
    margin-left: 200px;
    margin-right: 300px;
    background: pink;
}
.right{
    width: 300px;
    height: 300px;
    top: 0;left: 0;
   position: absolute;
    margin-left: 200px;
    background: lawngreen;;
}

在这里插入图片描述
2、浮动定位法

<!--左右侧栏的位置可以更改-->
<div id="left"></div>
<div id="right"></div>
<!--中间栏放最后-->
<div id="main"></div>

#left{
  width:300px;
  background-color:yellow;
  float:left;
}
#right{
  width:200px;
  background-color:orange;
  float:right;
}
#main{
  background-color:aqua;
  margin-left:300px;
  margin-right:200px;
}

3、flex布局：

给父元素设置display：flex；子元素设置对应的宽高。

4、浮动+margin（负值）：

三个栏都采用左浮动；
中间栏的div写在最前面，宽度为100%
左侧栏也是左浮动，默认情况下由于前面的中间栏div占据了100%，因此这个左侧栏是在中间栏下方一行的。为左侧栏设置margin-left:-100%，即整个屏幕的宽度100%，这就令左侧栏跑到了中间栏的最左侧。
右侧栏也是左浮动，此时默认情况下也是在中间栏下方一行的，同样利用margin-left:-300px，即其自身的宽度，使其到上一行最右侧的位置。
中间栏的内容部分则需要利用分别等于左右侧栏宽度的外边距来空出它们的位置。

div{
  height:100%;
}


.middle{
  background-color:aqua;
  width:100%;
  float:left;
}
.left{
  width:200px;
  background-color:yellow;
  float:left;
  margin-left:-100%;
}

.right{
width:300px;
  background-color:orange;
  float:left;
  margin-left:-300px;
}

5、圣杯布局：

 .container {
            padding: 0 220px 0 220px;
            overflow: hidden;
        }
        .left,
        .middle,
        .right {
            position: relative;
            float: left;
            // 多列等高
            margin-bottom: -2000px;   
            padding-bottom: 2000px;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
             background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
           	background: green;
        }
        .middle {
            width: 100%;
            background: blue;
        }

前面的实现都一样，三栏都向左浮动，center的宽度为100%，left的margin-left为-100%，right的margin-left为其自身宽度的负值。
但此时左右边栏实际上是在center上方的，会遮盖center内容。

此时为container设置一个左右的padding，分别为left和right的宽度。此时整体都是向中间压缩的：

然后对left与right使用position:relative，使其相对现在的位置分别向左、向右移动，从而占据container利用padding空出来的位置。

6、双飞翼布局：

<body>
       <div id="main">
           <div class="content"></div>(content包含在main中)
       </div>
       <div id="left"></div>
       <div id="right"></div>
</body>
#main {float:left;width:100%;}
.content {margin:0 200px;height:100%;background:red;}
#left{float:left;width:200px;margin-left:-100%;background:blue;}
#right{float:left;width:200px;margin-left:-200px;background:green;}

用main将content包起来，然后浮动，content利用margin向两边空出距离，让左右元素进来。左右元素都是左浮动.
当一个元素margin-left：的距离等于他自身的距离的负值时，他就会移动到上一层，right块元素就会移动到main的最右边.
当一个元素margin-left:的距离等于负100%(也就是body的长度)，他就会移动到上一层的最左边。