如何對齊DIV佈局中的行？

我試圖從舊項目擺脫表，但我發現了一個問題，我不知道如何解決。如果我有像this這樣的表格：如何對齊DIV佈局中的行？

<table> 
    <tr> 
     <td>First Row</td> 
     <td>Second Row</td> 
     <td>Third Row</td> 
    </tr> 
    <tr> 
     <td> 
      Some content here 
     </td> 
     <td> 
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. 
     </td> 
     <td> 
      Problem comes when columns have different content height 
     </td> 
    </tr> 
    <tr> 
     <td>This is aligned!</td> 
     <td>With this</td> 
     <td>And this!!</td> 
    </tr> 
</table>

每列中最新的行都是對齊的。如何在DIV版面設計中做到這一點？我的嘗試是this，但它沒有按我的預期工作。

來源

2011-11-24 Ivan

我同意帕維爾。我仍然更喜歡擺脫非表格數據的表格（這是一個很細的表格數據，什麼不是，但我不會親自考慮這個，我想這取決於你有多少內容）。

我會使用列表。 Div也很好，但列表更容易風格化（你不需要給他們上課）。另外，如果你要從表格切換到div，那麼抓住列表是一件非常好的事情，你將會使用它們很多。只是一個不同的選擇。

編輯：這裏有更多關於使用表格數據列表的信息。來源：http://mirificampress.com/permalink/the_amazing_li

多列列出li

建設列出了包裝成多列是快速和容易li。當數據實際是表格（需要列標題，列和行）時，應該使用table。但是當你只是想增加列表的外觀並使其更容易閱讀時，你應該使用這種方法。就像其他任何一組li一樣，多列表使得簡單的HTML代碼和列表項的重新排列變得容易。這是它的工作原理。

HTML：

<div id="list_wrapper"> 
    <ul class="multiple_columns"> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
     <li>Six</li> 
     <li>Seven</li> 
     <li>Eight</li> 
     <li>Nine</li> 
    </ul> 
</div>

CSS：

ul{ 
    margin: 0 auto; 
    padding: 0; 
} 

/* The wider the #list_wrapper is, the more columns will fit in it */ 
#list_wrapper{ 
    width: 200px 
} 

/* The wider this li is, the fewer columns there will be */ 
    ul.multiple_columns li{ 
     text-align: left; 
     float: left; 
     list-style: none; 
     height: 30px; 
     width: 50px; 
    }

列表項只是針對堆棧彼此水平，直到填滿含包裝的寬度。在這種情況下，我們有一個200px寬的包裝器，每個列表項設置爲50px寬。由於50次進入200次四次，這意味着我們將在每一行中有四個列表項。

試試看吧，然後回來，如果你有你將不得不使用集裝箱作爲行任何具體問題:)

來源

2011-11-24 10:59:01 Yisela

這是可能的一個例子..我不是很好的HTML和CSS :) – Ivan

是的，我會編輯我的答案，所以你知道從哪裏開始 – Yisela

@Ivan完成。練習使用此代碼來了解列表的工作方式。另外，爲了將來的參考，請查看關於使用菜單列表的文檔，它將爲您節省大量時間用於下一個項目:)歡迎來到真棒世界的非表！ – Yisela

不要讓事情變得如此複雜。如果你希望你的數據有一張表格，那麼爲什麼擺脫表格？設計整個頁面時，表格佈局很糟糕。但是如果你需要它的功能，再次考慮你的決定。如上所述，如果你想水平排列一些元素，那麼爲什麼把它們放在單獨的div中呢？把它們放在一個div中，去掉div上的「float」風格，這樣它們就會相互疊加。

來源

2011-11-24 10:41:36

嗯，這是一個頁面功能，它是，所有頁面都有這個佈局，所以我認爲使用表格很糟糕。當我把相同的DIV放在一起，然後列錯位：:(你可以修改jsfiddle來告訴我怎麼做嗎？謝謝 – Ivan

@Ivan如果你有元素應該同時水平和垂直對齊，那麼我認爲嘗試一些不自然的風格和佈局調整，僅僅爲了刪除表是比僅僅使用表更加惡毒。所以對不起，我真的不知道用div來實現你的想法的好方法。 –

，而不是collumns。

來源

2011-11-24 11:27:11 ANeves

如何對齊DIV佈局中的行？

回答

相關問題