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

Question

У меня есть страница с парой дивы, вроде этого:

<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

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

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

Answer 3

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

Answer 4

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, вы хотите установить «выравнивания текста: центр» на родительский элемент. В этом случае я предполагаю, что это узел тела. Кроме того, margin: 0 auto не работает, если вы не указали ширину.

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

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