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/

清除正在使用display的div：inline-block？

2 个答案: