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

Question

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

我有超文本标记语言

<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类的实现如下所述

我想要这个。picture div位于左侧和右侧。description div保持在右侧。所以我写了这个CSS

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

到现在为止，一切都很好。

但有时，没有图片出现。在这种情况下，我想要那个。description div扩展到所有的。容器div宽度。因此，我尝试删除两个div的宽度：

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

但是描述div流低于图片div（如果图片存在）

Answer 1

删除浮点数：right；从图片类。它会自动排在另一个旁边，因为浮动离开了。

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

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

Answer 2

将最小宽度用于。改为图片：

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

当img标签从picture div中移除时，布局应该会像我认为的那样崩溃。

Answer 3

http://jsfiddle.net/UQngw/

当我禁用css时

.clearfix {
    #display: inline-block;
}

看起来像显示：行块 让div尽可能宽。

UPDATE
嗯，我只是发现我的代码有一些问题，当文本这么长的时候...
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;
}