2012-07-17 131 views
3

我要用CSS創建一個水平網格佈局。 (我會讓它通過jQuery和this解決方案水平滾動請注意,滾動是不是我的問題我的問題是關於建立網格。)用css創建網格佈局

這是一個例子:

我有搜索互聯網關於CSS網格,但似乎他們不能幫助我...

我的問題是,如何創建像上面的圖像?我應該爲此使用哪些插件或css屬性?

編輯:我想有行的固定數量(我的意思是,行的數量應變化,當我調整頁面應該有一個滾動條,而不是。)(我將內部使用與overflow: auto一個div)

+0

現在不要生氣,但要在網格中顯示什麼樣的數據?表格數據? – 2012-07-17 18:11:24

+1

@MrLister每個字段包含一篇文章的摘要。 – 2012-07-17 18:13:09

+1

不用擔心Mahdi--很高興你有一個對你有用的答案。 – BonyT 2012-07-17 21:29:05

回答

5

display:tabledisplay:table-rowdisplay:table-celldisplay:inline-block

這些CSS屬性可以幫助,只是看看他們在本地的CSS信息網站。

table -values讓每個元素的行爲都像一個表,而不用實際使用一個表。這可能是您的問題的一個很好的解決方案。

inline-block - 值解決了負擔問題,飄浮在水上的佈局具有與塊顯示在線,就像img秒。當然,在舊版瀏覽器中幾乎沒有這種支持。

+0

這有什麼問題? http://jsfiddle.net/ZUNxD/1/它改變divs的大小,以適應頁面,但我不想這...另外'邊際'不工作... – 2012-07-17 18:27:42

+0

表試圖適合所有可用的寬度。你可以用'width'屬性強制更大的尺寸;在你的小提琴中,將它設置在'.a'類中。 – amon 2012-07-17 18:29:50

+0

那麼'保證金'呢?爲什麼它不起作用? – 2012-07-17 18:38:33