2动态大小divs + float：left

Question

抱歉标题不好。

所以我在一个固定大小的容器中有两个float:left属性的div。每个div都有可选的大小。问题是如果我用div2填充div2，它会在div1之下，但它们应该是彼此相邻的。我希望div2变得更小，而不是低于div1。

检查JS Fiddle上的示例：

Answer 1

一种方法是修改浮点数并使用display:table-cell代替：

.div1 {
    border:1px solid red;
    display:table-cell;
}
.div2 {
    border:1px solid blue;
    display:table-cell;
}

<强> jsFiddle example

Answer 2

尝试

.div2 {
    float: none; /* default value */
    overflow: hidden;
}

Demo

Answer 3

为div2设置最大宽度。由于你没有为div2设置任何大小，当文本长度到达其父元素的边缘时，它会下拉到下一行。 max-width将允许它在大小上达到动态，直到达到极限。

.div2 { max-width: 250px; }

jsFiddle Example

Answer 4

如果你想要两个div应该是

1. 等高
2. 始终在左右

然后使用

.div1 {       
    border:1px solid red;
    display: table-cell;
}

.div2 {        
    border:1px solid blue;
    display:  table-cell;
}

http://jsfiddle.net/w5h5H/8/

Answer 5

在两个div上设置max-width百分比。这是一个小提琴：http://jsfiddle.net/w5h5H/10/

百分比可能需要稍微调整一下，以允许任何边距或边界。