Question

我正在尝试为容器div中的多个div元素设置边距。这是HTML：

<div id="container">
    <div id="square"></div>
    <div id="square1"></div>
    <div id="square2"></div>
</div>

这是CSS：

#container {
    background: #ccc;
    width: 200px;
    height: 500px;
    position: absolute;
    overflow: initial;
}

#square {
    margin-top: 10px;
    height: 50px;
    background: green;
}

#square2 {
    margin-top: 275px;
    height: 55px;
    background: black;
}

现在，我想要编辑方形边缘1.这是更新的CSS：

#container {
    background: #ccc;
    width: 200px;
    height: 500px;
    position: absolute;
    overflow: initial;
}

#square {
    margin-top: 10px;
    height: 50px;
    background: green;
}

#square2 {
    margin-top: 275px;
    height: 55px;
    background: black;
}

#square1 {
    margin-top: 55px;
    height: 50px;
    background: red;
}

方块1的边距是正确的。然而，它弄乱了square2的边缘，因为现在上边距是从square1而不是容器div测量的。如何将所有同级div的边距设置为从容器中测量它们的位置，无论其他兄弟div添加/删除的是什么？任何帮助将不胜感激。

Answer 1

你需要提供position absolute和width 100%;你可以查看js小提琴

Js fiddle

每个方块都是这样的

 #square {
    margin-top: 10px;
    height: 50px;
    background: green;
    position:absolute;
    width:100%;
 }

Answer 2

最好将这些方形div转换为相对div，并为每个方格div设置绝对位置。你有点幸运，因为你知道每个方形div的高度。

所以你的HTML保持不变。你将绝对值放在相对值中的原因是绝对值在#container字段而不是body中播放。

然而，您的CSS更改了：

#container {
    background: #eee;
    width: 200px;
    height: 500px;
    position: relative;
    border: 10px solid green;
}

#square {
    margin-top: 10px;
    position: absolute;
    height: 50px;
    left: 0;
    right: 0;
    background: green;
}

#square2 {
    margin-top: 275px;
    height: 55px;
    position: absolute;
    background: black;
    left: 0;
    right: 0;
}

#square1 {
    margin-top: 55px;
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
    background: red;
}

受影响的HTML兄弟边距

2 个答案: