Question

我有一个小问题，我有4个div，它们的宽度和高度都是50px，位于绝对位置。样本布局为2 x 2。

手动定位它们之间的间隙为10px。问题是如果我需要调整框的大小，我将不得不单独调整它们的大小并重新计算它们之间的空间，因为它们是绝对定位并且会越多，我拥有的div越多。我被告知Sass可以帮助我解决这个问题。所以我试图用Sass来帮助，但我不知道该如何去做。

一个例子：

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="test.css"/>
    <title></title>
</head>
<body>
    <div class="section">
        <div class="box" id="box-position-1"></div>
        <div class="box" id="box-position-2"></div>
        <div class="box" id="box-position-3"></div>
        <div class="box" id="box-position-4"></div>
    </div>

</body>
</html>

CSS：

.section {
    position: relative;
}

.box {
    width: 50px;
    height: 50px;
    position: absolute;
    border: 1px solid #000;
}

#box-position-3,
#box-position-4 {
    top: 60px;
}

#box-position-2,
#box-position-4 {
    left: 60px;
}

Answer 1

您可以尝试使用float或display: inline-block（甚至是表格）来使您的div项目一起流动而不必手动调整彼此的距离，而不是使用绝对定位，或者为每个项目使用个人ID。

您可以尝试多种解决方案。我建议使用Table解决方案，但这可能因您的需求而异。

使用Float：

选中此JSFiddle

这是最容易设置的！只需将float: left;添加到.box课程即可。这将允许DIV元素一个接一个地自动定位。添加margin: (number)px;以便将这些框彼此隔开特定距离。

使用内联块：

Check out this JSFiddle

同上！只需添加display: inline-block而不是float。这会将div视为文本，因此如果您打算在包含文本的块中插入这些框，请务必小心。

使用表格

这绝对是最好的方式。

Here's a JS fiddle.

表格记录非常详细，因此我不会解释此代码（与原始代码完全不同），而是会为您提供一些资源。

http://www.temple.edu/cs/web/tables.html

http://www.w3schools.com/html/html_tables.asp （我知道人们讨厌w3schools，但这篇文章似乎很好）

编辑：Cinnamon指出，桌子可能会令人沮丧，具体取决于他们的使用情况。在决定使用哪种方法之前，请先查看此Stackoverflow question。

祝你好运。

另一个说明：在您的评论中，您描述了您正在创建平面图。我建议使用SVG图像来说明这一点，而不是HTML。

在绝对定位中调整多个div的大小

1 个答案: