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

回答

相关问题