таблицы позиционирования css рядом друг с другом - PullRequest
Новая
       0

таблицы позиционирования css рядом друг с другом

3 голосов
/ 01 июля 2011

Используя HTML / CSS ниже, у меня есть 3 таблицы. Я бы хотел, чтобы таблицы 1 и 2 находились рядом друг с другом на «одной и той же строке», а таблица 3 внизу, но с перерывом между ними.

Однако, когда я использую float: left / right в первых двух таблицах, таблица 3 ВСЕГДА находится непосредственно под и «касается» таблиц1 / 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>

Ответы [ 2 ]

4 голосов
/ 10 октября 2013

Я знаю, что это немного поздно, но подобное решение может быть, но в CSS "display:inline-block", но есть также "display:inline-table" Работал на меня:)

Кроме того, для меня работала еще одна вещь: "float:left"

См. здесь

3 голосов
/ 01 июля 2011

Вы должны применить некоторые дополнительные стили: 

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 не поддерживает его.

...