ДИВ не полная ширина

Question

У меня есть два Div как этого

<div id="left"><p>.....</p><br/> 
<p>.....</p> 
</div> 
<div id="right"><img ..../></div> 

И у меня есть CSS.

#left 
{ 
position: relative 
float: left; 
} 


#right 
{ 
position: relative 
float: right; 
} 

права DIV не всплывает права, потому что р элементы слева не дает пространство для правого элемента сНа, но в CSS я не установить что-то P, как эта ширину: 100%. Как сделать ширину левой ширины? Я не знаю ширины изображения, поэтому я не могу установить фиксированную ширину в обоих div.

Answer 1

Неплавающие элементы блока будут действовать как «потолки» для плавающих элементов, которые появляются под ними. В принципе, попробовать что-то вроде этого:

<div> 
    <div id="right"><img .../></div> 
    <p>......</p> 
    <p>......</P> 
</div> 

Answer 2

p является блочным элементом, поэтому его 100% -ная ширина несколько по умолчанию. Вы можете установить его ширину на другое значение или просто поместить изображение, а p не будет плавать (так что это будет работать, как должно работать float).

Answer 3

Вам нужно будет установить ширину #left, иначе это не сработает. В качестве обходного пути я предлагаю разместить тег div #right внутри слева и плавать вправо. В вашем простом примере это работает хорошо.

Другие варианты: использовать Javascript. Вы можете получить ширину изображения при загрузке, а затем установить ширину в соответствии с этим, но это довольно уродливо.

Answer 4

Этот вопрос кажется хорошим, чтобы спросить более в Doctype.