html - 清除正在使用显示 :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

嗯...你可以滥用 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/

或者操纵 float :

#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/