css - 如果没有向右浮动的 div，如何让向左浮动的 div 展开

Question

我有一个 div，它包含三个等长的子 div，右边有一个图像 div(它可以是一个子 div，但不一定是)。我的 CMS 工作方式 我可以使用语句 [if image] 使图像 div 在加载图像时显示。但是如果没有图像，我无法告诉前三个子 div 表现不同。如果没有图像，我希望它们像父对象一样为 800px，但如果有图像，则为 490px，以便为图像腾出空间让图像向右浮动。不幸的是，我的 CMS 的“if”函数没有“else”函数。

父 div 是故事，因此 CMS 加载的页面上有多个父 div。如果有图像，我希望 CMS [if image] 显示为下面的狗。 http://i2.photobucket.com/albums/y44/elfshadowreaper/example1.jpg

但对于没有图像的故事，我希望子 div 的宽度像这样增加到 800px。 http://i2.photobucket.com/albums/y44/elfshadowreaper/example2.jpg

这是我的基本代码: HTML

<div class="parent_div">
    <div class="child_div_a">
    </div>
    <div class="child_div_b">
    </div>
    <div class="child_div_c">
    </div>
</div>

<div class="image_div"> <!-- this doesn't have to be outside the parent div if it'll work that way-->
    <img src="www">
</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;
}

Answer 1

我认为你把情况复杂化了。只有图像需要向右浮动。另一个 div 不需要应用任何 float 。

这是一个 fiddle 来演示我在说什么。将图像 div 放在父级内部的其他 div 之前

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

<div>
    <div  style='float:right; display: block; width: 300px;'><img style='width: 300px;' src='http://image.motortrend.com/f/oftheyear/car/1301_2013_motor_trend_car_of_the_year_tesla_model_s/41007848+w623+h388+cr1+ar0/2013-Tesla-Model-S-front-three-quarter-2.jpg' /></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 将为 float 元素腾出空间。
如果图像 div 不存在，则 div 将占据父 div 的整个宽度。

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