Как заставить div расширяться до ширины страницы с помощью css?

Question

У меня есть страница с парой div, вроде как:

<div id="div_one">blah blah blah</div>
<div id="div_two">blah blah blah</div>

Я хочу, чтобы они располагались по центру по горизонтали, один за другим, а второй расширялся до ширины страницы.

Answer 1

.first_one
{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.second_one
{
  width: 100%;
}

Тогда, на ваш взгляд, для первого вы бы сделали

<div class = "first_one">
...
</div>

Для второго вы бы сделали

<div class = "first_one second_one">
...
</div>

Answer 2

body{ text-align: center; }

.first_one
{
  width: 600px; /* Can be any width */
  margin:0 auto;
}

/* Reset text-align for child content */
.first_one, .second_one{text-align: left}

Чтобы центрировать «first_one» в IE6, вам нужно установить «text-align: center» в родительском элементе. В этом случае я предполагаю, что это узел тела. Кроме того, margin: 0 auto не работает, если вы не укажете ширину.

Затем вы захотите установить выравнивание текста по левому краю дочерних элементов div, чтобы содержимое внутри них не центрировалось.

Вам не нужно указывать ширину для "second_one", поскольку элементы блока естественным образом расширяются, заполняя их родительские контейнеры. Кроме того, не устанавливая ширину, браузер будет учитывать любые отступы, поля и границы, которые вы можете применить к «second_one», не нарушая компоновку.

Answer 3

Имейте в виду, что для элементов есть поля по умолчанию, поэтому, даже если это 100%, все еще могут быть некоторые пропуски на стороне. Вы можете использовать CSS для сброса полей в 0, где это необходимо.

Answer 4

Div - это полная ширина контейнера по умолчанию.

Чтобы центрировать содержимое по горизонтали, установите на них «text-align: center;». Если они находятся в контейнере, также используйте «margin: auto» для контейнера, который установит левое и правое поля для автоматического центрирования div.