css - 水平堆叠的 Div 用于液体布局，其中一个宽度会发生变化？

Question

下面是我的代码和 fiddle :http://jsfiddle.net/hehUt/2/

<div class="one"></div>
<div class="two">text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text heretext here text here text here  text here text here text here text here text here text here text here re text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text heretext here text here text here  text here text here text here text here text here text here text here 
</div>​
.one {
    background-color: red;
    height: 75px;
    width: 75px;
    float: left;
}
.two {
    margin-left: 75px;
}​

我希望 2 个 div 在流式布局中并排放置，并占据所有可用空间。我还希望文本不要在图像之后换行，而是保持垂直对齐。一切正常。

然而，如果 div.one 的宽度发生变化，我需要更改应用于 div.two 的边距。有没有解决的办法？例如，如果 div.one 的宽度是由 CMS 中的内容设置的，如此不同，我是否需要让 CMS 将边距 px 值应用于 div.two，或者是否有适用于不同宽度的 div 的 CSS 解决方案。一？谢谢

Answer 1

只需执行 overflow: hidden; 而不是 margin-left。小演示:little link . overflow: hidden; 强制 .two 不与 float 的 .one 相交。