css-布局 两边等宽中间自适应的三栏布局

我们通常使用圣杯布局和双飞翼布局来实现两边等宽中间自适应的三栏布局。

这两种布局的实现思路基本一致，但有一些细微的差别。

一、圣杯布局

圣杯布局实现思路

圣杯布局的实现思路是通过设置父元素的padding-left和padding-right值，让父元素左右的两边撑出足够容纳左右子元素的空间，然后调整左右两个子元素的定位。让子元素的位置移动到被父元素撑开空出来的位置。

html

<div class="container">
  <div class="center">中间</div>
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>

css

.container {
  padding: 0 200px; /*1、父元素的左右往里撑，给左右两边的元素留位置*/
}

.container::after {
  content: '';
  clear: both;
  display: block;
}

.container>div {
  float: left;      /*2、使中间、左、右元素浮动*/
  height: 100px;
}

.center {
  width: 100%;      /*3、使中间元素宽度占满父元素*/
  background-color: #f25f5c;
}

.left,
.right {
  position: relative;/*4、左右两个元素都需要设置相对定位，后面需要使用left调整位置*/
  width: 200px;
}

.left {
  margin-left: -100%;/*5、左边元素往最左靠*/
  left: -200px;      /*6、因为父元素使用padding,所以要使用left:-200px才能使元素靠近最左边*/
  background-color: #70c1b3;
}

.right {
  margin-left: -200px;/*7、让右边元素刚好靠近中间元素的右边*/
  left: 200px;       /*8、同样，因为父元素使用padding,所以要使用left:200px才能使元素靠近最右边*/
  background-color: #247ba0;
}

实现效果

二、双飞翼布局

双飞翼布局实现思路

双飞翼布局的实现思路是让中间的元素增加一个子元素，通过设置这个子元素的margin-left、margin-right的值，使左右两边留出空的位置，用来摆放左右两边的固定宽度的元素。

html

<div class="container">
  <div class="center">
    <div>
      中间
    </div>
  </div>
  <div class="left">左</div>
  <div class="right">右</div>
</div>

css

.container>div {
  height: 100px;
  float: left;/*1、使中间、左、右元素浮动*/
}

.container::after {
  content: '';
  display: block;
  clear: both;
}

.center {
  width: 100%;/*2、使中间元素宽度占满父元素*/
}

.center>div {
  background-color: #2a9d8f;
  margin: 0 200px;/*3、中间元素的子元素设置margin使左右边两边留出位置*/
  height: 100%;
}

.left,.right {
  width: 200px;
}

.left {
  background-color: #e76f51;
  margin-left: -100%;/*4、左边元素往最左靠*/
}

.right {
  margin-left: -200px;/*5、让右边元素刚好靠近中间元素的右边*/
  background-color: #f4a261;
}

实现效果

总结

从圣杯布局与双飞翼布局实现两边等宽中间自适应的布局方式来看

• 圣杯布局是设置父元素的左右padding值来解决问题
• 双飞翼布局是通过设置中间元素的子元素的左右margin值来解决问题

与双飞翼布局相比，圣杯布局不仅要调整左右两边元素的margin值，还要设置其相对定位position:relative，调整left的值来完成位置的调整。而双飞翼布局只需要调整左右元素的margin值就可以完成位置的调整。所以使用双飞翼布局代码更简洁一些。