css圣杯布局实现两种方式

css圣杯布局实现,分别是以下两种方式,分别是:

1. position+margin-left:

2. flex布局

   
   

1.position+margin-left

• 圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度

• 圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度

• 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置 

• 圣杯布局的关键点父元素需要设置 padding

• 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 

<div class="g-container">
  <div class="g-middle">middle</div>
  <div class="g-left">left</div>
  <div class="g-right">right</div>
</div>

*{
	margin: 0;padding: 0;
}
.g-container {
  position: relative;
  height: 100vh;
  padding: 0 200px;
  min-width: 400px;
}
.g-container > div {
  height: 100vh;
  float: left;
  text-align: center;
  color: #fff;
  line-height: 100vh;
  font-size: 3vw;
}

.g-middle {
  position: relative;
  width: 100%;
  background: #cc6630;
}

.g-left {
  position: relative;
  width: 200px;
  background: #ffcc00;
  margin-left: -100%;
  left: -200px;
}

.g-right {
  position: relative;
  width: 200px;
  background: pink;
  margin-left: -200px;
  right: -200px;
}

2.flex实现

<div class="g-container">
	  <div class="g-middle">middle</div>
	  <div class="g-left">left</div>
	  <div class="g-right">right</div>
	</div>

*{
	margin: 0;padding: 0;
}
.g-container {
  position: relative;
  height: 100vh;
  min-width: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.g-container > div {
  height: 100vh;
  text-align: center;
  color: #fff;
  line-height: 100vh;
  font-size: 3vw;
}

.g-middle {
  order: 2;
  flex: 1 0 auto;
  background: #cc6630;
}

.g-left {
  order: 1;
  flex: 0 0 200px;
  background: #ffcc00;
}

.g-right {
  order: 3;
  flex: 0 0 200px;
  background: pink;
}

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/708

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！