TShopping

 找回密碼
 註冊
搜索
查看: 543|回復: 0

[教學] CSS原生table屬性讓多個div等高與垂直居中

[複製鏈接]
發表於 2014-9-14 13:51:33 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 

  身旁有許多從事網頁設計的朋友,時常問到梅干一個問題,就是早期用table排版時,完全不用考慮td等高的問題,但當改用div進行排版時,就會遇到,二個或多個div時,就會各自依內容長高,且也無法垂直居中,這應該是許多人的困擾,而之前為了讓二個div等高,梅干還特別用了jQuery,來抓div的最大值,將要等高的div值動態寫入,其實會這麼麻煩,一切都是因為IE6.0的緣故,由於IE對於CSS支援度差,使得一下這不行用,那不行用的,把一件簡單的事變的很麻煩。

  其實在CSS2中,就有一個table的顯示屬性可用,將div直接模擬成table來使用,就可實現多個div等高外,還可讓div內的元件垂直居中,完全不用寫任何的程式碼,就可作到等高與居中的問題,隨著IE6.0已漸漸的消失後,再加上IE8.0、IE9.0已成為目前的主流後,終於在這些的版本中,支援了table屬性,因此現在就可放心的使用,這個table屬性,輕鬆實現多個div等高與垂直居中的美夢啦!
css-table 屬性:
  1. display:table => table
複製代碼

多個div等高:css:
  1. /* table */
  2. .table {  
  3.   display: table;
  4.   border-collapse: collapse;
  5. }  

  6. /* tr */
  7. .row{
  8.         display: table-row; border:solid 1px red;
  9. }

  10. /* td , th */
  11. .cell1 {  
  12.   display: table-cell;
  13.   width: 180px;
  14.   border-right: 1px dotted #fff;
  15.   background:#fcd6d6;
  16. }  

  17. .cell2 {  
  18.   display: table-cell;
  19.   width: 180px;
  20.   padding-left: 10px;
  21.   border-right: 1px dotted #fff;
  22.   background:#eff8ff;
  23. }  

  24. .cell3 {  
  25.   display: table-cell;
  26.   width: 180px;
  27.   padding-left: 10px;
  28.   background:#effff0;
  29. }
複製代碼
html
  1. </blockquote></div>html:<div class="blockcode"><blockquote><div class="table"><!-- table -->
  2.          <div class="row"><!-- tr -->
  3.          <div class="cell1"><!-- td -->  
  4.             table-cell內容1<br />
  5.             table-cell內容1<br />
  6.             table-cell內容1<br />
  7.             table-cell內容1<br /><br />      
  8.          </div>
  9.          <div class="cell2">
  10.                table-cell內容2<br>
  11.                table-cell內容2
  12.          </div>
  13.          <div class="cell3">
  14.                table-cell內容3
  15.          </div>
  16.      </div>   
  17. </div>
複製代碼
結果預覽:

垂直居中:css:


html

CSS
  1. .table-wrap {display:table; width:300px; height:300px; border:solid 1px #ccc; }
  2. .table-cell {display:table-cell; vertical-align:middle; text-align:center;}
複製代碼
html
  1. <div class="table-wrap">
  2.     <div class="table-cell">
  3.         <div class="content">
  4.            內容置中
  5.         </div>
  6.     </div>
  7. </div>
複製代碼

結果預覽:
1.png




 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-12 06:05 , Processed in 0.111212 second(s), 24 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表