0

我在一个浮动到左侧的容器中有两个 div。在某些容器中，缺少左 div，所以我想这样做，以便如果缺少左 div，则右 div 应该扩展到容器的全宽。

在下面的代码中，我指定了右 div 的宽度，因此如果缺少左 div，它不会填满整个容器。

这是代码：

HTML：

<div class="box">
    <div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
    <div class="right">... content...</div>
</div>

CSS：

.box{
    width: 300px;    
    border: 1px solid red;
    margin: 0 auto;
    overflow: hidden;
}

.left{
    width: 80px;
    margin-right: 10px;
    float: left;
}

.right{
    float: left;
    width: 210px;
}

JSFiddle：http: //jsfiddle.net/DMFz8/

4

2 回答 2

4

您可以使用相邻的选择器，这样只有在它旁边.right有一个时才会浮动。.left

将.right选择器和规则替换为：

.left + .right{
    float: right;
    width: 210px;
}

演示

于 2012-10-12T16:38:02.887 回答
1

我不知道你到底想要什么，但试试这个可能会有所帮助

<div class="box">
 <div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget ligula sapien, sed tempor felis. Vivamus eget bibendum augue. Sed sit amet nulla lectus. Etiam vitae lacus ipsum. Aliquam malesuada orci nec ipsum pretium fermentum. Fusce libero mauris, convallis ut aliquam et, scelerisque vel turpis. 
</div>

jsFiddle

于 2012-10-12T16:47:16.577 回答