CSS中表格布局的模拟_Css - Fatal编程技术网

CSS中表格布局的模拟

css

CSS中表格布局的模拟,css,Css,到目前为止，我的所有网站都使用了表格布局，但现在我希望尝试使用纯CSS布局。但我真的很挣扎如何在CSS中模拟以下内容： <table> <tr> <td>Some Content 1</td> <td>Some Content 2</td> </tr> </table> 部分内容1 部分内容2 现在让我们假设“部分内容1”和“部分内容2”是标记。然后，结果输出是两个并排

到目前为止，我的所有网站都使用了表格布局，但现在我希望尝试使用纯CSS布局。但我真的很挣扎

如何在CSS中模拟以下内容：

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


部分内容1
部分内容2

现在让我们假设“部分内容1”和“部分内容2”是标记。然后，结果输出是两个并排的图像，具有中心垂直对齐。表中两个单元格的大小是图像的大小加上一些填充

因此，表格会自动调整大小，以适合图像或单元格内的任何内容

但我如何在CSS中做到这一点，它让我发疯！我几乎要放弃了，只是使用了一个表格布局，为什么不呢，它是如此简单

非常感谢您的建议

谢谢

我认为你能做的唯一方法是使用

标记并设置它们的属性，比如CSS中的float

我认为你不能用CSS创建一个表格，因为CSS定义了页面的样式和元素，而不是元素本身。

类似的布局可以使用CSS和div标签生成

现在有很多工具可以使用CSS构建这样的布局。所有现代网页设计工具都具有这些功能

除此之外，像Yahoo Grid Builder这样的工具同样也很方便。

这可以在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>

这并不能满足您的所有需求，但已经很接近了

然后，结果输出是两个并排的图像，具有中心垂直对齐。表中两个单元格的大小是图像的大小加上一些填充

你是说像这样的事吗

<!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>


所以问题2005928
#图像img{
填充：10px；
垂直对齐：中间对齐；
}

将您的

表

、

tr

和

td

标记更改为

div

，并使“td divs”浮动：左。或者，使用

display:inline block

（包含所有相关问题），或者使用

display:table cell

（包含所有相关问题）。

老实说，只需坚持表格即可。当CSS将提供网格布局所需的所有工具，并且所有浏览器都将可靠地支持它们时，请切换到无表

您的另一个选择是进行大量的破解，并获得一个备用的F5键进行测试。

要使一个元素的行为类似于使用纯CSS的表，请使用

display

属性和值

table

，

table row

，

table cell

，

inline table

，等等

IE不支持这一点，这在某种程度上违背了不使用表格进行列式布局的目标，因为标记仍然是基于行的。

忘记CSS与表格的“或”概念吧。这两种方法都有其优点和缺点，会把你逼上绝路

我说用CSS尽可能多地创建，其他布局问题，使用表格

此外，在网格系统和CSS3的表格布局和模板布局模块之间，CSS实际上正朝着“基于表格”的布局发展。

只是想说声好运，你会需要它的。我不明白使用“纯CSS”的意义。在这里用桌子有什么问题？你只需要把表格的布局放到css中（边距、填充、边框等），在过去的两年里，我一直在努力做你想做的事情。而且从未成功模拟过桌子的行为。如果有人能回答这个问题，这将是一个“大谜团解决”的案件！除了Stefan的注释（+1）之外，无表设计意味着您没有使用表来显示数据。使用表来显示两个必须并排显示的图像不是问题，事实上，这是一个表。这些图像必须是相关的内容，并且必须以语义的方式将它们结合在一起。这样你就不会攻击现代网页设计的任何“规则”。如果把它们连接起来只是一个美观的问题，那么你应该使用CSS（尝试在每个图像上使用一个div或一个span），我不认为这两个div会像表格列一样垂直对齐到中间。谢谢你的回答，但我觉得浮动div必须有一个固定的宽度。虽然浏览器支持不带宽度的浮动，但我不认为这是CSS标准的一部分。为了反映这一点，我修改了我的答案。请再试一次，让我知道它是否适用于您。我们如何添加另一行，使其与表一样对齐和行为？这是另一个问题。问一个新问题。