使用CSS構建表格

我試圖在沒有成功的情況下用CSS開發特定的簡單佈局。我想實現這樣的事情：使用CSS構建表格

BookImage  BookImage  BookImage 
BookTitle  BookTitle  BookTitle

就知道我有這樣的：

<div class="center"> 
<h2>Science</h2> 
    <div class="ThreeColumns"> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    </div>

.threeColumns{ 
    -moz-column-count: 3; /* Firefox */ 
    -webkit-column-count: 3; /* Safari and Chrome */ 
    column-count: 3; 
    }

的問題是，我沒有得到我想要的東西。就好像每個標籤（<img>或<p></p>）被視爲「列」。我想要一種方法將<img>和<p>組合在一起，並將它們放在一起並獲得我的佈局。我認爲<div>可以做到這一點，但我錯了。

來源

2013-06-12 Luigi Tiburzi

您還需要你的孩子的div display:table你的div容器，並display:table-cell。

來源

2013-06-12 18:46:47 landons

當你正在尋找這樣的結果，只需使用<table>與<tr> s和<td> s。你可以用CSS來設計背景，邊框等。

來源

2013-06-12 18:48:16 Mooseman

你能解釋爲什麼在網絡上是如此著名的「永不使用表」，「他們是不是要走的路」，「使用CSS而不是」這激發了我的決定??? –

表格用於表格數據。有人可能會爭辯說，你試圖顯示的數據是表格式的。表格不適用於放置頁面。 –

表格只能用於呈現表格數據。表格數據基本上是一個電子表格。（可能相關：http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1）。 – cimmanon

如果要真正建立一個表，你爲什麼不利用所有<table>標籤。拇指有人通則告訴我在這個網站之前曾經是它的好，當數據實際上是表格而不是佈局用表。如果你的數據是表格，這似乎是，爲什麼推倒重來。

來源

2013-06-12 18:49:22 War10ck

很久以前，世界各地的代碼猴們都使用表格進行佈局，這就是爲什麼*「無表設計」最終成爲了一件事。有一個普遍的吶喊，你應該*從不使用表格造型*（這是正確的路要走）。但是隨着人類交流的進行，許多人只得到*從不使用表*部分信息。我想這就是爲什麼我看到很多人試圖做不是...

的。 – Renan

這並不一定表示* this *是表格。 – cimmanon

@Ranan同意。我被教導說'

'是一件壞事。只有在這個網站上，有人向我正確地解釋了他們，讓我知道這不是'

這是壞的，但他們的方式濫用佈局的目的。 – War10ck

你要找的關鍵是break-inside財產。

.ThreeColumns div { 
    -webkit-column-break-inside: avoid; /* this is the old name */ 
    break-inside: avoid; /* this is the new name */ 
}

但是，Firefox根本不支持此屬性，即使它支持大多數其他列屬性。

來源

2013-06-12 18:55:36 cimmanon

這個屬性，在他的情況下，可以通過將div設置爲內嵌塊元素來強制，因此它們保留在一列中。如果你喜歡，這是一個解決方法或者一個技巧。 –

爲了避免的div從柱噴到另一個，將它們設置爲直列boxe /內容。

<div class="center"> 
<h2>Science</h2> 
    <div class="ThreeColumns"> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    <div> <img src="ex"><p>Title</p> </div> 
    </div>

.threeColumns{ 
    -moz-column-count: 3; /* Firefox */ 
    -webkit-column-count: 3; /* Safari and Chrome */ 
    column-count: 3; 
    } 
.threeColumns > div { 
    display:inline-block; 
    }

來源

2013-06-12 19:07:41

相關問題

使用CSS構建表格

回答

相關問題