在CSS中模擬表格佈局

對於我目前爲止所有的網站，我都使用了表格佈局，但現在我想嘗試使用純CSS佈局。但我真的很掙扎！在CSS中模擬表格佈局

我如何可以模擬在CSS如下：

<table> 
    <tr> 
    <td>Some Content 1</td> 
    <td>Some Content 2</td> 
    </tr> 
</table>

現在讓我們假設，「有些內容1」和「有些內容2」，而不是<img>標籤。然後生成的輸出是兩個圖像並排放置，並居中垂直對齊。表格中兩個單元格的大小是圖像的大小加上一些填充。

因此，表格自動調整大小以適合圖像或任何內容在單元格內。

但我該如何在CSS中做到這一點，這讓我發瘋！我幾乎要放棄，只是使用表格佈局，爲什麼不呢，它非常簡單。

任何建議最感激地收到。

感謝，

來源

2010-01-05 AJ.

只想說好運，你需要它。 – 2010-01-05 12:27:13

我沒有看到使用「純CSS」的要點。在這裏使用表有什麼問題？你只需要將表格的佈局設置爲css（邊距，填充，邊框等）。 – 2010-01-05 12:28:35

過去兩年來，我一直在努力做你想做的事。並且從未成功模擬表格行爲。如果有人能夠回答這個問題，那將是一個「神祕解決方案」！ – Nirmal 2010-01-05 12:29:50

我看你可以把它，否則使用<div>標籤並設置其屬性，如浮在CSS做的唯一途徑。

我不認爲你實際上可以在CSS中創建表格，因爲CSS定義了頁面的樣式，它是元素，而不是元素本身。

來源

2010-01-05 12:28:51

使用CSS和div標籤可以生成類似的佈局。

現在有很多工具可以使用CSS來構建這樣的佈局。所有現代網頁設計工具都具有這些功能。

除了像Yahoo Grid Builder這樣的工具(link to Yahoo Grid builder)也可以得心應手。

來源

2010-01-05 12:29:39

這項工作在Firefox（尚未在其他瀏覽器中測試過）。邊界只是爲了說明。

<div> 

<div style="float:left; width:49%;border:1px solid black;"> 
    <img style="float:right; width:343px" src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
</div> 

<div style="float:right; width:49%;border:1px solid black;"> 
    <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
</div> 

</div>

你的問題是有些模棱兩可（也許這就是我），但你也可能意味着這樣的：

<div> 

<div style="float:left; width:49%; border:1px solid black;"> 
    <div style="margin:auto; width:343px; border:2px solid red;" > 
     <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
    </div> 

</div> 

    <div style="float:left; width:49%; border:1px solid black;"> 
    <div style="margin:auto; width:343px; border:2px solid red;" > 
     <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
    </div> 
    </div> 
</div>

這並不滿足你所有的要求，但接近。

來源

2010-01-05 12:30:18

我不認爲兩個DIV將垂直對齊到中間，就好像它們是表格列一樣。 – Nirmal 2010-01-05 12:32:08

感謝您的回覆，但我的印象是浮動的div必須有固定的寬度。雖然瀏覽器支持float沒有寬度，但我不認爲它是CSS標準的一部分。 – 2010-01-05 12:35:53

我已更正我的答案以反映此情況。再試一次，讓我知道它是否適合你。 – 2010-01-05 13:30:04

然後結果輸出是兩個圖像並排居中垂直調整。表格中兩個單元格的大小是圖像的大小加上一些填充。

你的意思是這樣嗎？

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2005928</title> 
     <style> 
      #images img { 
       padding: 10px; 
       vertical-align: middle; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="images"> 
      <img src="http://sstatic.net/so/img/logo.png" width="100" height="50"> 
      <img src="http://sstatic.net/so/img/logo.png" width="50" height="100"> 
     </div> 
    </body> 
</html>

來源

2010-01-05 12:31:27 BalusC

我們如何添加另一行對齊並像表格一樣行？ – Nirmal 2010-01-05 12:34:47

這是一個不同的問題。問一個新問題。 – BalusC 2010-01-05 12:46:17