如果只存在另一个元素，如何向左浮动

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

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

我创建了一个新的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/