css - 仅当另一个元素存在时如何向左浮动

Question

首先，请耐心等待，因为我的英语不太好，我不知道我是否能很好地解释解决方案。所以...

我有这个 HTML

<div id='container'>

    <div class='picture'>
        <img src='...'>
    </div>

    <div class='description'>
        <div id='attrb1' class='clearfix'>...</div>
        <div id='attrb2' class='clearfix'>...</div>
        <div id='attrb3' class='clearfix'>...</div>
        <div id='attrb4' class='clearfix'>...</div>
    </div>

</div>

clearfix 类的实现如here所述

我希望 .picture div 留在左边， .description div 留在右边。所以我写了这个 CSS

.picture { float: left; width: 100px; }
.picture img { width: 100px; height: auto; }
.description { float: right; width: 815px; }

到现在为止，一切正常。

但有时，没有图片。在这种情况下，我希望 .description div 扩展到所有 .container div 宽度。所以我试图删除两个 div 的宽度：

.picture { float: left; }
.picture img { width: 100px; height: auto; }
.description { float: right; }

但是 .description div 在 .picture div 下方流动（如果图片存在）

这是一个屏幕截图：

Answer 1

http://jsfiddle.net/UQngw/

当我禁用 css

.clearfix {
    #display: inline-block;
}

看起来display: line-block;让 div 尽可能宽。

更新
好吧，我只是发现我的代码在文本这么长时出现了一些问题......
http://jsfiddle.net/HbCaK/3/ 我在这次尝试中禁用了以下css，但我不确定这是否是适合您的情况：

.description {
    #float: right;
}
.clearfix:after {
    content:".";
    #display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    #display: inline-block;
}

Answer 2

对 .picture 使用 min-width 代替：

.picture { float: left; min-width: 100px; }
.picture img { width: auto height: auto; }
.description { float: right; width: 815px; }

当从图片 div 中删除 img 标签时，布局应该像我认为你所要求的那样折叠。

Answer 3

float: right;从 .picture 类中删除。由于浮动左侧，它将自动排列在另一个旁边。

我创建了一个新的 jsfiddle：http: //jsfiddle.net/mu2MV/

如果内容太大，这也会增加垂直滚动。否则它会破裂并包裹在图片下方。

Answer 4

我想这会解决你的问题......

.picture img { width: 100px; height: auto; }
#container > div:nth-of-type(1){
    float: left;    
}
#container > div:nth-of-type(2) {
    float: right;     
}

http://jsfiddle.net/vYwYe/5/

http://jsfiddle.net/vYwYe/6/