在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