CSS позиционирования проблема с плавающей точкой и маржи

Question

Это мой пример для jsfiddle http://jsfiddle.net/YG6tx/5/

, поэтому мой вопрос: почему красный div (pageWrap) не принимает высоту своих внутренних элементов?

Если я укажу float:left, он получит высоту, но margin: 0 auto больше не будет удерживаться.

как я могу достичь обоих?(margin:0 auto + div должен принимать высоту).

Нужно ли явно указывать height?

Я новичок, поэтому этот вопрос может показаться простым.

Answer 1

Разработка с плавающими и абсолютно позиционированными элементами сложна ... Их родительские элементы не будут оборачивать их так часто, что вам придется указывать атрибут высоты у родителя, чтобы получить желаемый вид.Однако .topLeft не обязательно должно обладать свойством float:left;.Если вы удалите это, я думаю, вы получите желаемый вид.Пример: http://jsfiddle.net/YG6tx/8/

Answer 2

Попробуйте эту обновленную скрипку: http://jsfiddle.net/YG6tx/12/

Так как в вашей оригинальной скрипке не было изображений из-за неправильного пути к изображениям, поэтому в моей скрипке также нет изображений, но по вашему требованию я изменил макет.

В соответствии с вашими требованиями изображения находятся в положении, красный div принимает всю высоту в соответствии с элементами внутри и по центру, а также поле: 0 авто;

Если я отстаю от некоторых, пожалуйста, прокомментируйте, чтобы я мог изменить согласно требованию.

Answer 3

Просто дайте overflow:hidden #pagewrap.