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

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 时才会 float 。

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

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

Demo