css定位表并排答案

【问题标题】：css positioning tables next to each othercss定位表并排
【发布时间】：2013-10-10 20:51:13
【问题描述】：

使用下面的 HTML/CSS，我有 3 个表格。我希望表 1 和表 2 在“同一行”上彼此相邻，表 3 在下面，但它们之间有一个休息点。

但是，当我在前两张桌子上使用 float:left/right 时，桌子 3 总是直接在下面并且“接触”tables1/2？

我尝试了margin/clear/float，但似乎无法让事情排成一行:(

感谢您的帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        DIV.search
        {
            width: 80%;
            margin-right: auto;
            margin-left: auto;
        }

        DIV.search TABLE
        {
            border: 1px solid black;
            border-collapse: separate;
        }

        DIV.search TABLE.table1
        {
            float: left;
            width: 45%;
        }

        DIV.search TABLE.table2
        {
            float: right;
            width: 45%;
        }

        TABLE.table3
        {
            border: 1px solid black;
            margin-top: 50px;
            margin-right: auto;
            margin-left: auto;
            width: 80%;
        }
    </style>
</head>
<body>
    <div class="search">
        <table class="table1">
            <tr>
                <td>
                    TABLE 1
                </td>
            </tr>
        </table>
        <table class="table2">
            <tr>
                <td>
                    TABLE 2
                </td>
            </tr>
        </table>
    </div>
    <table class="table3">
        <tr>
            <td>
                TABLE 3
            </td>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

您发布的代码在 chrome 中对我来说似乎很好。桌子之间有空间...jsfiddle.net/uJtFy您使用的是哪个浏览器？
你现在的有什么问题？我创建了一个jsFiddle，它在 Chrome 和 IE9 中运行良好。
不知道为什么 jsFiddle 会显示桌子之间的房间，如果你创建页面并在 Chrome 中打开它，就像 BlueChippy 所描述的那样。
嗯...听起来像是浏览器的问题？我已经尝试过 FireFox 和 IE8，并且两者都相同（搞砸了！）。目标浏览器将是 IE8，因为这是它所针对的公司的标准。
也许我应该重新表述这个问题：我想要两张并排的桌子，下面还有一张桌子。不在乎怎么做！

标签： html css positioning

【解决方案1】：

我知道这有点晚了，但类似的解决方案可能是在 css 中“display:inline-block”，但也有“display:inline-table”。为我工作:)

另外，对我有用的另一件事是使用"float:left"

见here

【讨论】：

可能晚了，但这是一个很好的答案！它保存了我在 webkit 浏览器中试图将许多小表放在一行上的确切问题。谢谢！

【解决方案2】：

你应该应用一些额外的样式：

DIV.search
{
    width: 80%;
    margin-right: auto;
    margin-left: auto;

    overflow: hidden; /* Fixing the problem in modern browsers */
    zoom: 1; /* Fixing in old IE by applying hasLayout */
    padding-bottom: 50px; /* I prefer padding here than margin in table3 */
}

TABLE.table3
{
    border: 1px solid black;
    /* margin-top: 50px; */
    margin-right: auto;
    margin-left: auto;
    width: 80%;
}

您可以尝试使用 :after（在下面的答案中），但旧的 IE 不支持它。

【讨论】：