0
点赞
收藏
分享

微信扫一扫

经典三栏布局(圣杯布局或双飞翼布局)

软件共享软件 2022-02-15 阅读 83
csshtmlcss3

        圣杯布局:三个元素放在同一个父级元素中,代表中间盒子的元素放在最前面,父级盒子设置左右padding,三个盒子全部浮动,设置中间盒子宽度100%,左右盒子设置固定宽度,设置左边盒子左边距-100%同时相对自身定位,右边平移自身宽度,右边盒子设置右边距-自身宽度,最后设置父级盒子清除浮动,否则父级盒子的高度无法被撑开

.container {
  background-color: #ddd;
  padding: 0 200px;
  font-size: 40px;
  overflow: hidden;
 }

.left {
    position: relative;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    right: 200px;
    background-color: tomato;
}

.right {
    width: 200px;
    height: 200px;
    margin-right: -200px;
    background-color: thistle;
}

.center {
    width: 100%;
    height: 200px;
    background-color: turquoise;
}
.fl {
	float: left;
}

<div class="container clearfix">
     <div class="center fl">中间盒子</div>
     <div class="left fl">左</div>
     <div class="right fl">右</div>
</div>
  • 优点:不需要添加dom节点

  • 缺点:正常情况下是没有问题的,但是特殊情况下就会暴露此方案的弊端,当middle部分的宽小于left部分时就会发生布局混乱。

        双飞翼布局:三个盒子对应三个元素,其中中间盒子套了两层,中间盒子内部盒子设置margin,三个盒子全部浮动,设置中间盒子宽度100%,左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度,最后设置父级盒子清除浮动,否则父级盒子的高度无法被撑开

body {
    font-size: 40px;
    min-width: 500px;
    background-color: #ddd;
}
.fl {
	float: left;
}
.left {
    width: 200px;
    height: 200px;
    background-color: tomato;
    margin-left: -100%;
}

.right {
    width: 200px;
    height: 200px;
    background-color: thistle;
    margin-left: -200px;
}

.center {
    width: 100%;
    height: 200px;
    background-color: turquoise;
}
.c-inner {
	margin: 0 200px;
}

<div class="fl center" >
	<div class="c-inner">中间盒子</div>
</div>
<div class="fl left" >左</div>
<div class="fl right" >右</div>
  • 优点:不会像圣杯布局那样变形,CSS样式代码更简洁

  • 缺点:多加了一层dom节点

举报

相关推荐

0 条评论