Как я могу растянуть DIV до 100%, не растягивая его родительский элемент автоширины? - PullRequest
2 голосов
/ 28 декабря 2010

Дано DIV с несколькими внутренними DIV:

<div id="parent">
 <div id="a"></div>
 <div id="b"></div>
</div>

Все DIV должны иметь одинаковую ширину, тогда как она должна быть шириной самого широкого DIV. Родительский элемент не имеет явной ширины.

Как мне этого добиться?

Я думал, что width: 100% сделает это, но растянет родительский элемент до размера окна.

Эскиз:

################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#*********     #
#*bbbbbbb*     #
#*********     #
################

должно быть

################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#**************#
#*bbbbbbb     *#
#**************#
################

# представляет родительский DIV, который не заполняет все окно.

Ответы [ 2 ]

4 голосов
/ 28 декабря 2010

Во-первых, этот тип вопросов, связанных с CSS, идеально подходит для дочернего сайта SO DocType , который фокусируется на CSS и дизайне сайта.

Что касается вашей проблемы, div - это элементы уровня блока и, следовательно, простираются на все заданное пространство. Если этого не происходит, это означает, что есть что-то, что отменяет это. Для быстрого исправления добавьте следующее:

#parent {
    position: relative;
}

И это может исправить вашу ситуацию. Если этого не произойдет, то у вас будут некоторые конфликты в вашем CSS где-то, и, возможно, приведя некоторый код или более конкретный пример, мы могли бы помочь больше. Опять же, как подробно описано в SO FAQ, DocType больше подходит для подобных вопросов.

0 голосов
/ 28 декабря 2010

Div обычно растягивается в зависимости от его содержимого. Чтобы два внутренних элемента имели одинаковую ширину, укажите ширину 50% и поместите один слева от другого. Кроме того, используйте четкие: оба на внешнем div.

пожалуйста, взгляните и на этот замечательный ресурс:

http://www.maxdesign.com.au/articles/css-layouts/

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