Html 2个动态尺寸div+；浮动：左

对不起，标题不好

因此，在一个大小固定的容器中，我有两个div，都带有

float:left

属性。每个div可以有可选的大小。问题是，如果我在第2部分中填充了大量文本，它会在第1部分下面，但它们应该相邻。我希望div2变得更小，而不是低于div1

---

检查示例：

一种方法是取消浮动并使用

显示：表格单元格

：

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

试试看

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

---

设置div2的最大宽度。因为您没有为div2设置大小，所以当文本长度到达其父元素的边缘时，它会下降到下一行。最大宽度将允许它在大小上是动态的，直到它达到极限

.div2 { max-width: 250px; }

---

如果需要，两个div都应该是

等高

总是在左边和右边

然后使用

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

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

---

将两个div上的

最大宽度设置为百分比。这是一把小提琴：

百分比可能需要调低一点，以考虑到您拥有的任何边距或边框。
您在发布没有实际代码的小提琴链接时使用了某种黑客手段：）将不会
浮动：左
计算为代码ie版本您必须支持的是什么table cell的问题是您获得了这些有时会渲染或不渲染的3px边距在broswers中，造成定位问题。显示也有同样的问题：内联块。我拒绝在我的站点上使用表单元格或内联块，因为它是有效的，但我看到的唯一问题是，如果他出于某种原因需要在div2旁边添加另一个div，它将自动向下分流到下一行。如果他设置了一个最大宽度，div2的大小将保持动态，但如果他需要在右边直接添加一个元素，同时保持所有内容的一致性，他可以调整它。问题是，div1也有可选的大小，如果我设置了div2的固定大小，而div1变大，它也会下降。你有理由让它们的大小保持可选吗？你真的应该定义宽度来减少这样的头痛。