Как я могу получить плавающие левые divs для расширения, если нет плавающего права div

У меня есть div, который содержит три дочерних divs равной длины с изображением div (он может быть дочерним, но он не обязательно должен быть справа). Как работает моя CMS, я могу использовать оператор [if image], чтобы сделать изображение div отображаемым, если загружено изображение. Но я не могу сказать, что первые три дочерних divs ведут себя по-другому, если нет изображения. Я хочу, чтобы они были 800px, как родительский, если изображение отсутствует, но должно быть 490px, если есть изображение, чтобы освободить место для правильного плавания изображения. К сожалению, для моей функции CMS "if" нет функции "else".

Родительские divs - это истории, поэтому на странице, которую загружает CMS, есть несколько родительских div. Если есть изображение, которое я хочу видеть в CMS [если изображение], как показано ниже. http://i2.photobucket.com/albums/y44/elfshadowreaper/example1.jpg

Но для рассказов без изображения я хочу, чтобы ширина дочерних divs увеличивалась до 800 пикселей. http://i2.photobucket.com/albums/y44/elfshadowreaper/example2.jpg

Вот базовый код, который у меня есть: HTML

<div>
 <div>
 </div>
 <div>
 </div>
 <div>
 </div>
</div>

<div> <!-- this doesn't have to be outside the parent div if it'll work that way-->
 
</div>

CSS

.parent_div {
 width: 800px;
 float: left;
}
.child_div_a {
 width: 490px;
 float: left;
}
.child_div_b {
 width: 490px;
 float: left;
}
.child_div_c {
 width: 490px;
 float: left;
}
.image_div {
 width: 300px;
 float: right;
}
2 ответа

Я думаю, вы слишком усложняете ситуацию. Только изображение должно плавать вправо. Другой div не требует никакого поплавка, применяемого к ним.

Вот скрипка, чтобы продемонстрировать, о чем я говорю. Поместите изображение div перед другими div внутри родительского

http://jsfiddle.net/NY2G3/1/

<div>
 
 <div>span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1</div>
 <div>span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2span 2</div>
 <div>span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3span 3</div>

</div>

Дивы освободят место для плавающего элемента. И если образ div не существует, divs принимают полную ширину родительского div.

http://jsfiddle.net/NY2G3/2/


Перенесите image_div сначала в метку вверх и плавайте только вправо.

.image_div { float: right; width: 200px; height: 200px; background-color: red; }
.parent_div { background-color: blue; }
.parent_div div { height: 50px; }

демонстрация

licensed under cc by-sa 3.0 with attribution.