Question

我有一个父div和子div具有不同的宽度和高度。如何使用子级最大有效值浮动父div，而不会通过绝对定位元素丢失空格。

示例：

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

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更改为相对位置，所以如果你移动父母，所有亲戚都会相对移动。

Answer 2

当使用浮动和对应于其他人的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;
}

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

如何在父div中自动化妆div

2 个答案: