CSS - 在其他 div 周围浮动子 div答案

【问题标题】：CSS - Float child divs around other divCSS - 在其他 div 周围浮动子 div
【发布时间】：2013-02-14 21:34:46
【问题描述】：

我想根据其他子 div 的高度动态调整子 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/

【问题讨论】：

你所说的正是 display:flex;专为……而设计的……一旦 webkit 以外的浏览器拥有它，你就会被设置！ caniuse.com/#feat=flexbox
我正在努力在 jfiddle 中设置它，完成后我会发布更新。

标签： css html css-position

【解决方案1】：

您可以通过在蓝色框上使用float: right 并在红色框上设置overflow: hidden 来做到这一点。

查看此jsFiddle 以获取示例。

【讨论】：

【解决方案2】：

如果在源代码中您首先添加蓝色 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 本身有点相交，但其中的内容按应有的方式包装。如果使用边框、背景颜色或背景图像，我不确定这将如何显示。这有帮助吗？

【讨论】：

【解决方案3】：

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 Bin 在这里：http://jsbin.com/irubuy/5

【讨论】：