CSS - 在其他div上浮動子div

我想根據其他子div的高度動態調整子div的寬度。這很難解釋，所以我只會顯示一些圖片...CSS - 在其他div上浮動子div

在這第一個圖像中，黑色方塊是我的「父母」div。它包含不同高度的其他div。藍色div的高度是靜態的，但必須漂浮在右側。紅色的div是我遇到的問題。如果它們出現在藍色底部的底部，它們應該自動調整它們自己的寬度。

小高度的第二個紅色div。看看最後的div如何適合父div的寬度。

具有較大高度的第二個紅色div。現在底部2 div的寬度都適合父div。

再舉一個例子...

我不知道我是否應該使用特殊的定位，或如何構建div的。如果藍色div下面有一些空格，那就好了，我只是想在紅色div之間有相等的空間。

這裏有點兒是我設置的。看到黃色div的是隱藏在右邊藍色的div背後：http://jsfiddle.net/MVzHS/1/

#floatRight { 
    width: 100px; 
    height:200px; 
    background-color:blue; 
    position: absolute; 
    right:10px; 
    top:10px; 
}

解決方法：http://jsfiddle.net/MVzHS/3/

來源

2013-02-13 gwin003

你在說什麼正是什麼顯示：flex;專爲......設計，一旦webkit以外的瀏覽器擁有它，你就會被設置！ http://caniuse.com/#feat=flexbox – PlantTheIdea 2013-02-13 21:54:46

我正在努力讓它在jfiddle中設置，當我完成後生病發布更新。 – gwin003 2013-02-13 22:03:31

您可以通過藍盒子使用float: right和設置上衝箱overflow: hidden做到這一點。

查看這個jsFiddle的例子。

來源

2013-02-13 22:04:20 dsundy

太棒了！我得到了它的工作。謝謝！！ – gwin003 2013-02-13 22:30:48

HTML

<div id="parent"> 

    <div id="blue">Blue content here</div> 

    <div id="red">Red 1 content here 
    <br>more content 
    <br>more content 
    <br>more content 
    <br>more content 
    <br>more content</div> 

    <div id="red">Red 2 content</div> 
    <div id="red">Red 3 content</div> 

</div>

CSS

#parent 
{ 
    border: 1px solid black; 
    height: 100%; 
} 

#blue 
{ 
    float: right; 
    border: 1px solid blue; 
    height: 100px; 
    margin-left: 10px; 
} 

#red 
{ 
    border: 1px solid red; 
    overflow: hidden; 
    margin-bottom: 10px; 
}

JS斌可以在這裏找到：http://jsbin.com/irubuy/5

來源

2013-02-13 22:07:35

如果源添加藍色DIV第一和浮動是正確的，這應該做你想做什麼/需要做的事情？

.black { 
    width:958px; 
    padding:10px; 
    border:1px solid #000; 
    float:left; 
} 
.blue { 
    width:248px; 
    height:400px; 
    border:1px solid #00f; 
    float:right; 
    margin:0 0 10px 30px; 
} 
.red { 
    border:1px solid #f00; 
    margin:0 0 10px; 
}

http://jsfiddle.net/seemly/BTxgJ/

唯一的「問題」，我發現與所提供的小提琴是的div本身那種相互交叉，但在其中的內容包，因爲他們應該。我不確定如果使用邊框，背景顏色或背景圖像，這將如何顯示。這有幫助嗎？

來源

2013-02-13 22:08:20 seemly

背景顏色似乎不受影響。 http://jsfiddle.net/MVzHS/3/ – gwin003 2013-02-14 13:30:42

CSS - 在其他div上浮動子div

回答

相關問題