Как расположить два div'а горизонтально внутри другого div'а

Question

Не так давно я начал заново работать с CSS, и сейчас у меня нет под рукой справочных материалов. Мой вопрос, вероятно, довольно прост, но поисковые системы не дают мне достаточно информации. Поэтому я решил внести свой вклад в коллективное знание...

Вот как я хочу, чтобы выглядела моя разметка:

|#header---------------------------------------------------------------| | TITLE | |#sub-title------------------------------------------------------------| |bread > crumb | username logout | |#sub-left | #sub-right| |---------------------------------|------------------------------------|


Я хочу, чтобы #sub-title содержал как #sub-left, так и #sub-right. Какие CSS-правила мне нужно использовать, чтобы гарантировать, что один div будет зависеть от атрибутов другого div? В этом случае, как мне обеспечить, чтобы #sub-left и #sub-right оставались внутри #sub-title?

Answer 1

Довольно распространённое заблуждение, что вам нужен clear:both div внизу, хотя на самом деле это не так. Хотя ответ Foxy правильный, вам не нужен этот несемантический и бесполезный clearing div. Всё, что вам нужно сделать — это добавить overflow:hidden к контейнеру:

#sub-title { overflow:hidden; }

Answer 2

Когда вы используете float для элементов sub-left и sub-right, они перестают занимать пространство внутри родительского блока sub-title. Чтобы родительский блок корректно расширялся и охватывал их, вам нужно добавить ещё один элемент с style="clear: both" под ними. Это предотвратит проблемы с размещением и отображением элементов в DOM.

Вот пример HTML-кода с нужным применением:

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

А также соответствующий CSS:

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}

Этот подход работает, так как добавленный элемент с классом clear-both заставляет родительский блок sub-title учитывать высоту плавающих элементов. Если вы не добавите этот элемент, контейнер будет сплющиваться и отображаться ниже плавающих блоков, что может привести к нежелательному поведению в вашем дизайне.

Answer 3

Вот решение, которое вам подходит:

<html>
    <head>
        <style type="text/css">
            #header {
                text-align: center;
            }
            #wrapper {
                margin: 0 auto;
                width: 600px;
            }
            #sub-main {
                margin: 0 auto;
                width: 600px;
            }
            #sub-left {
                float: left;
                width: 300px;
            }
            #sub-right {
                float: right;
                width: 240px;
                text-align: right;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header"><h1>Заголовок</h1></div>
            <div id="sub-main">
                <div id="sub-left">
                    Правый
                </div>
                <div id="sub-right">
                    Левый
                </div>
            </div>
        </div>
    </body>
</html>

С помощью класса wrapper вы можете управлять всей структурой документа, а с помощью класса sub-main — только двумя колонками.

Answer 4

Согласен с мнением Darko Z о том, что следует применять overflow: hidden к #sub-title. Однако стоит отметить, что метод overflow: hidden для очистки плавающих элементов не работает в IE6, если у элемента не задана фиксированная ширина или высота. Если вы не хотите указывать ширину или высоту, можно использовать свойство zoom: 1:

#sub-title { overflow: hidden; zoom: 1; }

Answer 5

Чтобы добиться центрирования содержимого с использованием CSS3, вы можете использовать flexbox вместо устаревших свойств, таких как -webkit-box. Вот более современный и простой подход:

#subtitle {
    display: flex; /* Используем flexbox */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    width: 100%; /* Ширина 100% */
}

#subleft, #subright {
    width: 50%; /* Каждая часть занимает 50% ширины родителя */
}

Этот код сделает ваш заголовок и подзаголовки более гибкими и удобными в использовании. Flexbox поддерживается во всех современных браузерах и позволяет легко управлять выравниванием и распределением пространства между элементами.

Как расположить два div'а горизонтально внутри другого div'а

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных