深圳深達品牌網(wǎng)站建設公司于2005年創(chuàng)立,
以高端網(wǎng)站建設、品牌網(wǎng)站設計、集團網(wǎng)站制作、響應式網(wǎng)站建設、外貿(mào)型網(wǎng)站設計、營銷型網(wǎng)站建設、手機網(wǎng)站制作、微信網(wǎng)站建設、H5網(wǎng)站制作、電子商務網(wǎng)站設計制作、品牌設計、平面設計、網(wǎng)絡服務、品牌整合傳播策劃為核心業(yè)務,
致力于高端市場,專注于品牌服務、提升企業(yè)形象!咨詢電話:0755-83769155

深圳網(wǎng)站建設、深圳網(wǎng)站設計、深圳網(wǎng)站制作、網(wǎng)頁設計、深圳網(wǎng)絡公司、品牌設計

2006版 | 咨詢電話:0755-83769155

設計觀點

css布局實例:網(wǎng)頁布局的方法
2011-09-03     文章來源: 建站學

  許多網(wǎng)頁設計師都喜歡,將兩個或者多個容器等高的并排放置,并在里面展示每個容器的內(nèi)容,就象經(jīng)典表格布局中的單元格控制幾個欄目的位置,也喜歡容器的內(nèi)容居中或頂部對齊顯示。
  但是你又不喜歡用table來實現(xiàn)他,那怎么辦呢?實現(xiàn)的方法很多,有根據(jù)視覺錯覺實現(xiàn)的,有用JS控制使高度相等的,還有采用容器溢出部分隱藏和列的負底邊界和正的內(nèi)補丁相結(jié)合的方法來解決列高度相同的問題。
  其實有個簡單的方法,使用display:table, display:table-row and display:table-cell 就可以實現(xiàn),而且高度小的容器會自適應那些高度相對較高的,但是IE不支持這個屬性,我們先不用去責備IE,相信以后會有所改善的。這里我制作了一個模型。
先看看xhtml的結(jié)構(gòu):
<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
  很簡單不用解釋就能看懂,但是這里給出一個table的結(jié)構(gòu),是不是很相似
<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;來區(qū)別幾個盒子,正如上面所陳述的,IE下不能正常顯示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1經(jīng)過測試均可以完美顯示.

深達觀點
OUR VIEW