2010-05-08 5 views
1

Есть ли у вас какие-либо идеи, как стилизовать этот макет, не указав точную высоту для «Элемента 1»?Абсолютное положение и плавающий

Код

Element1 
{ 
positon: relative; 
width: 100%; 
height: auto; /* I don't want to specify exact height */ 
} 

Inner1 
{ 
position: absolute; 
top: xyz px; 
left: xyz px; 
} 

Inner2 
{ 
position: absolute; 
top: xyz px; 
left: xyz px; 
} 

Element2 
{ 
float: left; 
width: 100%; 
} 

Пример

+--------------------------------------------------+ 
|Element1           | 
|        +--------+   | 
|  +--------+    |Inner2 |   | 
|  |Inner1 |    +--------+   | 
|  +--------+         | 
|             | 
|             | 
+--------------------------------------------------+ 

+--------------------------------------------------+ 
|Element2           | 
|             | 
|             | 
+--------------------------------------------------+ 

ответ

-1

вы могли бы попробовать положить DIV с ясным и установить на нем между элементом 1 и элемент 2

<div style="clear: both;">&nbsp;</div> 
1

I Извините , я неправильно читаю ваш вопрос, вы не можете фактически обернуть вокруг абсолютно позиционированных элементов, потому что они выведены из нормального потока и не могут влиять на другие элементы.

Вы могли бы обойти это, чтобы получить нижнюю позицию абсолютно позиционируемый элемент с помощью JavaScript и установить Element1 к тому или больше height, или вы можете установить min-height на Element1 так появляется, как он содержащий Inner элементы.

Смежные вопросы