Question

使用下面的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>

Answer 1

您应该应用其他一些风格：

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%;
}

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

Answer 2

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

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

请参阅here

css定位表彼此相邻

2 个答案: