三栏布局(双飞翼、圣杯、绝对定位、浮动、flex布局)

css总结 专栏收录该内容
10 篇文章 0 订阅

一、浮动和负边距(双飞翼和圣杯布局)

1、双飞翼布局

实现:

· left、center、right三种都设置左浮动
·设置center宽度为100%
· 设置负边距,left设置负边距为100%,right设置负边距为自身宽度
·设置content的margin值为左右两个侧栏留出空间,margin值大小为left和right宽度

html:

<div class="wrap">
        <div class="center">
        	<div>这是中间 这是中间 这是中间/div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

css:

.wrap{
    width: 80%;
    border: 1px red solid;
    overflow: hidden;
    box-sizing:border-box;
}
.wrap>div{
    height: 300px;
}
.left{
    float: left;
    width: 200px;
    background-color: green;
    margin-left: -100%;
}
.right{
    float: left;
    width: 250px;
    background-color: blue;
    margin-left: -250px;
}
.center{
    float: left;
    width: 100%;
    background-color: yellow;
}
.center div{
    margin-left: 200px;//给有字体的div设置外边距
    margin-right: 250px;
    height: 100%;
}

效果图:
在这里插入图片描述

2、圣杯布局

实现:

· left、center、right三种都设置左浮动
· 设置center宽度为width:100%,让其单独占满一行 ·
· 设置left和right 负的外边距(具体请看margin-left代码注释,此时center两边是左右两块留白区域) ·
· 把left和right分别移动到留白处,使用相对定位移动left和right部分。

html:

<div class="wrap">
        <div class="center">这是中间 这是中间 这是中间</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

css:

.wrap{
    width: 80%;
    border: 1px red solid;
    overflow: hidden;
    padding: 0 250px 0 200px;
    box-sizing:border-box;
}
.wrap>div{
    height: 300px;
}
.left{
    float: left;
    width: 200px;
    background-color: green;
    margin-left: -100%;//向左移动一整行的距离
    position: relative;
    left:-200px;
}
.right{
    float: left;
    width: 250px;
    background-color: blue;
    margin-left: -250px;//向左移动自身宽度的距离
    position: relative;
    right: -250px;
}
.center{
    float: left;
    width: 100%;
    background-color: yellow;
}

3、双飞翼布局与圣杯布局的区别

圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,

圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现。

双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。

双飞翼布局比圣杯布局多使用了1个div,少用大致4个css属性(圣杯布局container的 padding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,;而双飞翼布局子div里用margin-left和margin-right共2个属性,比圣杯布局思路更直接和简洁一点。简单说起来就是:双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了。

二、绝对定位

实现:

左右两边绝对定位,中间自适应

html:

<div class="main">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
</div>

css:

	 .main {
      position: relative;
    }
    .main div{
      height: 400px;
    }
    .left{
      position: absolute;
      left:0;
      width: 300px;
      background-color: green;
    }
    .right{
      position: absolute;
      right:0;
      width: 300px;
      background-color: blue;
    }
    .content{
      position: absolute;
      left:300px;
      right: 300px;
      background-color: yellow;
    }

三、浮动布局

实现:

左边左浮动,右边右浮动,中间自适应

html:

<div class="main">
    <div class="left">左侧固定</div>
    <div class="right">右侧固定</div>
    <div class="content">自适应区域</div>
</div>

css:

	.main {
      overflow: hidden;
    }
    .left {
      float: left;
      width: 300px;
      height: 300px;
      background-color: green;
    }
    .right {
      float: right;
      width: 300px;
      height: 300px;
      background-color: blue;
    }
    .content {
      height: 300px;
      background-color: yellow;
    }

四、flex布局

实现:

左右两边flex-bassi设置宽,中间用flex-grow索取父元素的剩余空间

html:

 <div class="main">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
</div>

css:

	.main{
      display: flex;
    }
    .left,.right {
      flex: 0 0 300px;//设置宽为300
      background-color:red
    }
    .content {
      flex: 1;//索取父元素的剩余空间
      background-color:green;
    }

注:如果html按content、left、rigth排序,把left的order设为-1,即可把left提到前面去

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值