Div разделяется с содержимым таблицы - PullRequest
Новая
       2

Div разделяется с содержимым таблицы

0 голосов
/ 09 июля 2011

У меня есть таблица, как показано ниже. Содержимое div после таблицы накладывается на таблицу, а не на новую строку 

<table border="0" style="width:680px;position:relative !important;">
    <tr>
        <td class="row1" style="background:red">1</td>
        <td class="row2" style="background:green">2</td>
    </tr>
</table>
<div style="position:relative !important;">22</div>

и это CSS 

   .row1 {
        width:405px;
        position:absolute;
    }
    .row2 {
        width:273px;
        position:absolute;
        left:390px;
    }

Может ли какое-нибудь тело помочь мне разобраться? Содержимое div должно находиться в новой строке под содержимым таблицы. Заранее спасибо

Ответы [ 5 ]

1 голос
/ 09 июля 2011

Это потому, что у вашего стола нет высоты.Высота падает, потому что вы разместили ячейки таблицы абсолютно.Простым решением было бы добавить высоту (если она всегда известна), но она не очень надежна.

Если вы публикуете то, что вы хотите сделать (в основном, почему вы позиционируете абсолютно), мы можем помочьдалее:)

0 голосов
/ 28 июня 2013

Я обнаружил, что самый простой подход, используемый в моем проекте, заключается в использовании стиля для добавления отступов внизу, чтобы даже перекрытие не было видно для пользователя

0 голосов
/ 09 июля 2011

* Обновление: на самом деле не знаю, чего вы пытаетесь достичь, но вот способ сделать это. 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            /* Wrapper container for the table and thd div below it. */
            .abs-div {
                position: absolute;
            }
            /* First td inside the table. */
            .row1 {
                float: left;
                margin-right: -15px;
                width: 405px
            }
            /* Second td within the table, but it's on the same row as the first td, but called row-2 for some reason. */
            .row2 {
                float: left;
                width: 273px
            }
            /* Div below table. */
            .div-below-table {
                position: relative !important;
            }
        </style>

    </head>
    <body>
        <div class="abs-div">
            <table border="0" style="width:680px;position:relative !important;">
                <tr>
                    <td class="row1" style="background:red">1</td>
                    <!-- Should this be on it's own row -->
                    <td class="row2" style="background:green">2</td>
                </tr>
            </table>
            <div class="div-below-table">22</div>
        </div>
    </body>
</html>
0 голосов
/ 09 июля 2011

Это происходит потому, что вы устанавливаете position: absolute в CSS: это означает, что нормальный поток прерывается и этот элемент перекрывается. Если вы удалите его, у вас не возникнет проблема:

fiddle http://jsfiddle.net/BHLhS/1/

0 голосов
/ 09 июля 2011

Ваши два <td> s position: absolute, которые не будут держать <table> открытым.Вам нужно будет

  • присвоить height своему table
  • , удалить absolute на td s
  • или добавить достаточно margin-top к вашему div, что он будет находиться под вашим столом.

Учитывая приведенную выше информацию, вероятно, вам нужен второй вариант.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...