從HTML表格中刪除列傾向

我正在設計一個包含7個圖像的表格，它們的大小大致相同。基本上，我想知道是否有一種方法（其他方式將每行分割成不同的表格）來改變HTML傾向，將所有內容都放在列中，並強制它根據行進行佈局。從HTML表格中刪除列傾向

這是一個jsfiddle它是什麼。（我用Lorem Ipsum而不是圖像）我想頂部和底部的行居中。

我知道我可以做到這一點，如果我將它分成三個表，並設置每個人有一個width:xxxpx和margin: 0 auto，但寧願不這樣做。

任何建議表示讚賞 - 謝謝！

來源

2012-02-23 bassplayer7

你確定[一張桌子是適合工作的工具]（http://www.hotdesign.com/seybold/）？ – Quentin 2012-02-23 17:49:04

愛那個網站。說真的，我通常真的很清楚桌子，但認爲在這種情況下最容易。我會看看非表是如何結合在一起的。 – bassplayer7 2012-02-23 18:57:06

是的，在這個問題上使用多個div可能會更好。是否有可能做一些這樣的：

HTML：

<div class="rows"> 
    <div class="top"> 
     <img></img> 
     <img></img> 
    </div> 
    <div class="middle"> 
     <img></img> 
     <img></img> 
     <img></img> 
    </div> 
    <div class="bottom"> 
     <img></img> 
     <img></img> 
    </div> 
<div>

CSS：

.rows{ 
    margin:10px; 
} 

.top, .bottom{ 
    padding-left:85px; 
    padding-right:85px; 
} 

.top, .bottom, .middle 
{ 
    width:520px; 
} 

.rows img 
{ 
    margin: 10px; 
    width:150px; 
}

基本上，讓圖像的正常流動控制自己的定位，而是使用邊距和填充以平衡間距。

來源

2012-02-23 18:30:51 Zensar

謝謝大家的幫助！ @Zensar我採納了你的建議，但選擇使用'width：66％'（和每個偶數行的'100％'）連同'margin：0 auto;'並且選擇每個偶數行與一個'：nth-child ）'僞類。這是最終產品的可擴展性http://dev.dropletirrigation.com/irrigation-suppliers.html – bassplayer7 2012-02-23 19:08:24

請參閱vertical-align屬性。

來源

2012-02-23 17:48:34 Quentin

爲什麼你甚至打擾每行創建多個單元？把所有放在同一個單元格中的圖像放在一起，放在一起。

來源

2012-02-23 17:51:07 Artyom

這確實很好地工作。我發現我必須在那裏放置div來保持它的中心。謝謝！ – bassplayer7 2012-02-23 18:58:11

從HTML表格中刪除列傾向

回答

相關問題