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

 

小結：實現的方式還有很多~今天暫時總結這些~~日后再繼續添加