div не полная ширина

Question

У меня есть два дива, как это

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

Answer 1

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

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

Answer 2

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

Answer 3

Этот вопрос, кажется, стоит задать на Doctype .

Answer 4

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

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