CSS技巧 (2)

標籤：add   min   strong   等於   嵌套   range   font   tar   nbsp   

前言 

 　　最近，面試的時候都碰到一些關於利用CSS實現多列等高布局或者一側寬度固定，另一側寬度自適應的問題，下面稍微總結一下：

 

先看一道題目巧妙的多列等高布局

規定下面的布局，實現多列等高布局，要求兩列背景色等高。

1 <div class="container">2     <div class="left">多列等高布局左<br/>多列等高布局左</div> 
3 <div class="right">多列等高布局右</div>
4 </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使用單獨的背景色（流體布局）

原理就是給每一列添加相對應用的容器，並進行相互嵌套，並在每個容器中設定背景色。這裡需要提醒大家你有多少列就需要多少個容器，比如說我們說的三列，那麼你就需要使用三個容器。如下所示：

1 <div id="container2">2   <div id="container1">3     <div id="col1">Column 1</div>4     <div id="col2">Column 2；Column 2；Column 2；Column 2；Column 2</div>5   </div>6 </div>

 1 // 在這裡有兩列，故需要兩個容器 2 #container2 { 3   float: left; 4   width: 100%; 5   background: orange; 6   position: relative; 7   overflow: hidden; 8 } 9 10 #container1 {11   float: left;12   width: 100%;13   background: green;14   position: relative;15   right: 30%;/* 距離是第二列的寬度，加上2%的padding */16 }17 18 #col1 {19   width: 66%;20   float: left;21   position: relative;22   left: 32%;/* container1容器right:30%;加上內邊距2%，故為32%；  */23 }24 25 #col2 {26   width: 26%;27   float: left;28   position: relative;29   left: 36%;/* 加上三個內邊距，所以是 36%；*/30 }

優點：相容各種瀏覽器

缺點：嵌套太多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>

 1 #container { 2   margin: 0 auto; 3   overflow: hidden; 4   width: 960px; 5 } 6  7 .column { 8   background: #ccc; 9   float: left;10   width: 200px;11   margin-right: 5px;12   margin-bottom: -99999px;13   padding-bottom: 99999px;14 }15 16 #content {17   background: #eee;18 }19 20 #right {21   float: right;22   margin-right: 0;23 }

優點：相容所有瀏覽器 

 戳 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

 

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

CSS技巧 (2)