javascript - 如何自动组成父div中的div

Question

我有一个不同宽度和高度的父 div 和子 div。如何在不丢失绝对定位元素的空间的情况下使用子元素的最大有效值浮动父 div。

这个例子：

http://jsfiddle.net/KSbjT

我需要挖掘什么样的方向？

HTML

<div class="parent" style="width: 500px; height: 500px; border: 1px solid #000; background: red; position: relative;">
    <div style="width: 100px; height: 200px; border: 1px solid #000; background: blue;"></div>  
    <div style="width: 200px; height: 500px; border: 1px solid #000; background: green;"></div> 
    <div style="width: 100px; height: 200px; border: 1px solid #000; background: yellow;"></div>
    <div style="width: 100px; height: 200px; border: 1px solid #000; background: aqua; position: absolute; top: 200px"></div>
</div>

CSS

.parent div {
    float: left;
}

Answer 1

当使用浮动和与其他人相对应的div的定位时，你想看看

position: relative;

也就是说，div 不是由屏幕上的固定位置控制的，而是与它旁边的 div 对应的位置。

我建议您将 html 和 css 分开，以便您的 html 不包含任何样式属性，而是创建更多您可以使用 css 控制的 html 类/id，这样会更漂亮且更易于阅读：

<div class="parent">
    <div id="blueGuy"></div>  
    <div id="greenGuy"></div> 
    <div id="yellowGuy"></div>
    <div id="aquaGuy"></div>
</div>

然而，例如，blueGuy 看起来像这样

#blueGuy
{
    width: 100px;
    height: 200px;
    border: 1px solid #000;
    background: blue;
}

更好的办法是对可以重复使用的外观进行分类，将其添加到类中，例如边框和宽度/高度。

Answer 2

我不完全理解您的要求，但我认为您可能需要将绝对定位的 div 更改为相对定位，因此如果您移动父级，所有亲戚都会相对于它移动。