0

我有一个 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;
}
4

2 回答 2

0

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

这是一个小提琴来证明我在说什么。将图像 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 将为浮动元素腾出空间。
如果图像 div 不存在，则 div 将占据父 div 的整个宽度。

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

于 2013-11-05T20:09:56.983 回答
0

首先将标记中的 image_div 向上移动，然后仅将其浮动在右侧。

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

演示

于 2013-11-05T20:10:04.077 回答