Таблица-ячейки с элементами float или inline-block путаются с содержимым других ячеек таблицы

ProgramBox

Таблица-ячейки с элементами float или inline-block путаются с содержимым других ячеек таблицы

Post author:admin
Запись опубликована:18 марта, 2023
Post category:Вопросы по программированию

#html #css #fluid-layout

#HTML #css #fluid-layout

Вопрос:

Я провел всю ночь, пытаясь понять это.

Когда я изменяю содержимое div на своей веб-странице, это мешает содержимому других divs, которые не являются ни родительскими, ни дочерними divs. Содержимое несвязанных разделов не должно быть независимым? Несмотря на это, я пытался понять и решить свою конкретную проблему, но безуспешно. Мне нужно больше, чем решение. объяснение.

Вот скрипка: http://jsfiddle.net/gQ3U2 /

и код:

 <html>
<head>
<style>
#content {
    display: table;
}

#columnleft {
    background-color: #FF0000;
    display: table-cell;
}

#columncenter {
    background-color: #FF00FF;
    display: table-cell;
}

.menu {
    float: right;
}
</style>
</head>
<body>
<div id="content">
    <div id="columnleft">
        <div class="menu">
            this menu
            <br/>
            takes
            <br/>
            some space
            <br/>
        </div>
    </div>
    <div id="columncenter">
        this should be on top
        <br/>
        but only appears here if:
        <br/>
        a) menu has display: inline-block or
        <br/>
        b) menu has float: right
    </div>
</div>
</body>
</html>

а) Я думаю, что это проблема с макетом ячеек таблицы, потому что в макете с плавающей точкой этого не происходит. Является ли это ограничением отображения: таблица?

б) В случае float:right я обнаружил, что a
после меню устраняет проблему. Почему?

c) очистить: оба после того, как меню не работает

d) Я не заинтересован ни в том, чтобы никто не понимал, почему, ни в исправлении изменений, которые меню вносит в другой div «вручную», ни в выборе другого корня, у которого нет этой проблемы. Я хочу иметь возможность выравнивать меню вправо с помощью float, подгонять divs к содержимому с помощью inline-block и продолжать использовать ячейки таблицы, все, если это возможно, без позиционирования.

Заранее спасибо, Хосе

1. Добавьте «выравнивание по вертикали: сверху;» в #columncenter

2. это исправляет побочный эффект. если я не ставлю float: right или inline-block, содержимое течет сверху. Зачем мне вообще нужно выравнивание по вертикали? возможно, здесь побочный эффект легко устраняется, но в других ситуациях такое же поведение может быть невозможно исправить

Ответ №1:

Есть ли конкретная причина для использования display: table ?

На самом деле нет необходимости использовать display:table большинство вариантов компоновки. Хорошим решением часто является просто использование плавающих элементов.

В качестве примера:

Есть скрипка!

CSS

 html, body, #content {
    height: 100%;
}
#columnleft {
    background-color: #FF0000;
    float: left;
    height: 100%;
}
#columncenter {
    background-color: #FF00FF;
    height: 100%;
}

1. ну, это позволяет избежать проблемы и не объяснять ее (что я рассматриваю, но это не тема этого вопроса)

2. Достаточно справедливо. Это кажется бессмысленным, о чем нужно беспокоиться… Если вы используете display:table для размещения столбца слева, почему вы перемещаете свое меню внутри него? Есть много причуд CSS 🙂

3. Спасибо 🙂 о ваших предыдущих комментариях: 1) теоретически мы не должны использовать float для макета, что злоупотребление и поддержка браузеров в настоящее время не делают это злоупотребление необходимым. 2) плавающий или встроенный блок в меню предназначен для того, чтобы его ширина соответствовала его содержимому (а затем выравнивалась по правому краю). Как еще я мог бы сделать меню а) выровненным по правому краю в родительском div б) выровненным по левому краю внутри содержимого? приветствия

Ответ №2:

По умолчанию vertical-align <td> или table-cell отображаемые элементы должны быть сброшены в начало, если вы хотите, чтобы они вели себя как обычное содержимое потока:

 #content {
    display: table;
}

#columnleft {

    display: table-cell;  
    vertical-align:top;
}
#columnleft {
    background-color: #FF0000;
}

#columncenter {
    background-color: #FF00FF;
}

ДЕМОНСТРАЦИЯ

1. то же, что и выше (то есть исправляет побочный эффект. если я не ставлю float: right или inline-block, содержимое течет сверху. Зачем мне вообще нужно выравнивание по вертикали? возможно, здесь побочный эффект легко устраняется, но в других ситуациях такое же поведение может быть невозможно исправить)

2. Вам нужно сбросить выравнивание по вертикали до любого желаемого значения. Это типичное поведение элементов table-cells / td / th. Ни в коем случае выравнивание по вертикали не будет применяться к тезисам, если они не взяты из потока через float или абсолютную / фиксированную позицию. 🙂

3. Привет, что такое stange, так это изменение поведения вертикального выравнивания в центральном div в зависимости от того, что я делаю внутри левого div. В этом нет особого смысла. Но, спасибо за ваш вклад 🙂