0

下面是我的代码和小提琴：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 解决方案。一？谢谢

4

3 回答 3

1

只是做overflow: hidden;而不是margin-left. 小演示：小链接。overflow: hidden;力.two不与浮动相交.one。

于 2012-09-20T14:04:18.283 回答
0

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;
}​
于 2012-09-20T13:57:49.010 回答
-1 
.one
{
     width:30%;
}

.two
{
     width:40%;
}

.three
{
     width:30%;
}

这是你想要的吗？

于 2012-09-20T13:57:19.353 回答