html - 清除使用 display:inline-block 的 div？

Question

我有动态内容，其宽度变化很大。如果可能的话，我试图避免使用最小宽度。我有一个 jsFiddle 向您展示我正在处理的内容。案例 1 是我每次都希望发生的事情，无论内容的宽度如何。情况 2 是内容太短时发生的情况。有什么办法吗？或者最小宽度是要走的路？

#container {
    width:200px;
}
#div1 {
    display:inline-block;
}
#div2 {
    display:inline-block;
}
#div3 {
    clear:both;
    display:inline-block;
}

这是jsfiddle。http://jsfiddle.net/vKTGy/1/

Answer 1

内容 div 必须是内联块吗？将内容 div 更改为块级元素应该可以解决此问题。

display: block;

Answer 2

嗯......你可以滥用display: table-cell那些支持它的浏览器版本：

#container {
    width:200px;
    background-color: #ddd;
}
#div1 {
    display:table-cell;
}
#div2 {
    display:table-cell;
}
#div3 {
    display:inline-block;
}

http://jsfiddle.net/vKTGy/7/

或操纵浮动：

#container {
    width: 200px;
    background-color: #ddd;
}
#div1 {
    float: left;
}
#div2 {
    float: left;
}
#div3 {
    clear: both;
    float: left;
    background-color: yellow;
}

http://jsfiddle.net/vKTGy/8/