像table一樣布局div

來源:互聯網
上載者:User

翻譯自:Equal height boxes with CSS

原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

下面是我翻譯的內容,是根據我對文章的理解意譯的,你就別挑哪裡翻譯的不對了,我的目的只是傳達這個CSS技巧

許多網頁設計師都喜歡,將兩個或者多個容器等高的並排放置,並在裡面展示每個容器的內容,就象經典表格版面配置中的儲存格控制幾個欄目的位置,也喜歡容器的內容置中或頂部對齊顯示。
但是你又不喜歡用table來實現他,那怎麼辦呢?實現的方法很多,有根據視覺錯覺實現的,有用JS控制使高度相等的,還有採用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。
其實有個簡單的方法,使用display:table, display:table-row and display:table-cell 就可以實現,而且高度小的容器會自適應那些高度相對較高的,但是IE不支援這個屬性,我們先不用去責備IE,相信以後會有所改善的。這裡我製作了一個模型。

先看看xhtml的結構:

<div class="equal">
    <div class="row">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

很簡單不用解釋就能看懂,但是這裡給出一個table的結構,是不是很相似

<table>
 <tr>
  <td></td>
  <td></td>
  <td></td>
 </tr>
</table>

下來是css:

 .equal {
  display:table;
  border-collapse:separate;
 }
 .row {
  display:table-row;
 }
 .row div {
  display:table-cell;
 }
 .row .one {
  width:200px;
 }
 .row .two {
  width:200px;
 }
 .row .three {
  
 }

解釋:

1.dispaly:table;讓層.equal作為區塊層級元素的表格table顯示,也就是將他作為一個表格
2.border-collapse:separate;邊框獨立,就像表格沒有合併儲存格以前
3.display:table-row;將.row作為表格行tr顯示
4.display:table-cell;將.row的下級div作為表格儲存格td顯示
5.然後定義寬度

這裡還使用了 border-spacing:10px;來區別幾個盒子,正如上面所陳述的,IE下不能正常顯示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1經過測試均可以完美顯示.

至此整個任務就結束了,請在非IE瀏覽器下 預覽模型效果



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。