秋招面试题之两边定宽中间自适应

2018-09-08

我css是比较差的一部分

差不多有3种方法

1、两边float，中间margin。注意的是三个div的顺序，中间的要放在最后。like this：

<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>

.left{
  float: left;
  height: 200px;
  width: 200px;
  background: red;
}
.right{
  float: right;
  height: 200px;
  width: 200px;
  background: #000;
}
.mid{
  margin:0px 200px;
  height: 200px;
  background: blue;
}

2、绝对定位（两边绝对定位，left0，right0，中间用margin，注意的是需要初始化样式，不然会对不齐）

<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>

*{
  padding: 0;
  margin: 0;
}
.left{
  position: absolute;
  left: 0;
  height: 200px;
  width: 200px;
  background: red;
}
.right{
  position: absolute;
  right: 0;
  height: 200px;
  width: 200px;
  background: #000;
}
.mid{
  margin:0px 200px;
  height: 200px;
  background: blue;
}

3、圣杯布局

这个要扯到BFC，中间的部分要用一层div包起来

<div id = "wrap">
    <div id = "center"></div>
</div>
<div id = "left_margin"></div>
<div id = "right_margin"></div>

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}