水平堆疊水平佈局，其中一個寬度將改變？

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

來源

2012-09-20 Evans

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

來源

2012-09-20 14:04:18 Chris

很好的解決方案，謝謝。是否有任何限制需要注意？我很驚訝，我曾經聽說過這個，有時候當某件事情似乎是真的時候...... – Evans

@jdln沒有。只要你的左「div」被浮動，就沒事了。 – Chris

-1

.one 
{ 
    width:30%; 
} 

.two 
{ 
    width:40%; 
} 

.three 
{ 
    width:30%; 
}

這是你想要的嗎？

來源

2012-09-20 13:57:19 thatidiotguy

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-20 13:57:49 iambriansreed

由於需要支持IE7的縮小，我發現自己更頻繁地使用它。 – iambriansreed

水平堆疊水平佈局，其中一個寬度將改變？

回答

相關問題