CSS技巧 (2) · 多列等高布局

前言 

 　　最近，面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定，另一侧宽度自适应的问题，下面稍微总结一下：

 

先看一道题目

巧妙的多列等高布局

规定下面的布局，实现多列等高布局，要求两列背景色等高。

<div class="container">
    <div class="left">多列等高布局左<br/>多列等高布局左</div> 
<div class="right">多列等高布局右</div>
</div>

方法一：使用flex布局

<div class="container">
    <div class="left">多列等高布局左<br/>多列等高布局左</div> 
<div class="right">多列等高布局右</div>
</div>

.container{
  display:flex;
}
.left,.right{
  flex:1;
}
.left{
  background:pink;
}
.right{
  background:green;
}

缺点: IE9及IE9以下版本不支持flex属性

优点：实现方便，还可以方便实现各种比例

方法二:给容器div使用单独的背景色（流体布局）

原理就是给每一列添加相对应用的容器，并进行相互嵌套，并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列，那么你就需要使用三个容器。如下所示：

<div id="container2">
  <div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2；Column 2；Column 2；Column 2；Column 2</div>
  </div>
</div>

// 在这里有两列，故需要两个容器
#container2 {
  float: left;
  width: 100%;
  background: orange;
  position: relative;
  overflow: hidden;
}

#container1 {
  float: left;
  width: 100%;
  background: green;
  position: relative;
  right: 30%;/* 距离是第二列的宽度，加上2%的padding */
}

#col1 {
  width: 66%;
  float: left;
  position: relative;
  left: 32%;/* container1容器right:30%;加上内边距2%，故为32%；  */
}

#col2 {
  width: 26%;
  float: left;
  position: relative;
  left: 36%;/* 加上三个内边距，所以是 36%；*/
}

优点：兼容各种浏览器

缺点：嵌套太多div元素

两列等高布局，请戳 Demo ；三列等高布局 ，请戳 Demo；

方法三：使用内外边距相抵消，注意父元素设置 "overflow:hidden;"

<div id="container">
  <div id="left" class="column aside">
    <p>Sidebar</p>
  </div>
  <div id="content" class="column section">
    <p>Main content；content；content；content；content</p>
  </div>
  <div id="right" class="column aside">
    <p>Sidebar</p>
  </div>
</div>

#container {
  margin: 0 auto;
  overflow: hidden;
  width: 960px;
}

.column {
  background: #ccc;
  float: left;
  width: 200px;
  margin-right: 5px;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

#content {
  background: #eee;
}

#right {
  float: right;
  margin-right: 0;
}

优点：兼容所有浏览器 

 戳 Demo

方法四：边框模仿等高列

<div id="containerOuter">
  <div id="container">
    <div id="content">;Main Content;Main Content;Main Content;Main Content;Main Content;Main Content;Main Content</div>
    <div id="left">Left Sidebar</div>
    <div id="right">Right Sidebar</div>
  </div>
</div>

#containerOuter {
  margin: 0 auto;
  width: 960px;
}

#container {
  background-color: #0ff;
  float: left;
  width: 520px;
  border-left: 220px solid #0f0;
  /* 边框大小等于左边栏宽度，颜色和左边栏背景色一致*/
  border-right: 220px solid #f00;
  /* 边框大小等于右边栏宽度，颜色和右边栏背景色一致*/
}

#left {
  float: left;
  width: 200px;
  margin-left: -220px;
  padding:10px;
  position: relative;
/*   测试 */
  border:1px solid;
}

#content {
  float: left;
  width: 500px;
  padding:10px;  
  margin-right: -520px;
}

#right {
  float: right;
  width: 200px;  
  padding:10px;
  margin-right: -220px;
  position: relative;
}

戳 Demo

 

小结：实现的方式还有很多~今天暂时总结这些~~日后再继续添加