水平堆叠水平布局，其中一个宽度将改变？

Question

下面是我的代码和小提琴：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将margin px值应用于div.two或者是否存在可用于不同宽度div的CSS解决方案。一？谢谢

Answer 1

只是做overflow: hidden;代替margin-left。小演示：little link。 overflow: hidden;部队.two不与浮动的.one相交。

Answer 2

.one 
{ 
    width:30%; 
} 

.two 
{ 
    width:40%; 
} 

.three 
{ 
    width:30%; 
} 

这是你想要的吗？

Answer 3

http://jsfiddle.net/iambriansreed/hehUt/7/

我发现display: table-cell是非常有用的。

.wrap { 
    display: table-row; 
} 
.one { 
    display: table-cell; 
    background-color: red; 
    height: 75px; 
    width: 75px; 
} 
.two { 
    display: table-cell; 
}​