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

本文介绍了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的长度),他就会移动到上一层的最左边。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值