Question

我在一个向左浮动的容器内有两个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/

Answer 1

您可以使用adjacent selector，只有当.right旁边有.left时，.right才会浮动。

将.left + .right{ float: right; width: 210px; }选择器和规则替换为：

{{1}}

Demo

Answer 2

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

<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

如果缺少其他div，则扩展div宽度

2 个答案: