我有一个小问题，我有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;
}
最佳答案
您可以尝试使用float或display: inline-block（甚至是表格）之类的方法来代替绝对定位，这将使您的div项流到一起而无需手动调整彼此之间的距离，或者为每个项使用单独的ID 。
您可以尝试多种解决方案。我建议使用Table解决方案，但这可能会因您的需要而有所不同。
使用浮动：
选中此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，但本文似乎还不错）
编辑：肉桂指出表可能会根据其用法而令人沮丧。在决定使用哪种方法之前，请先查看此Stackoverflow question。
祝好运。
另一个注意事项：
在评论中，您描述您正在创建一个平面图。我建议使用SVG图片而不是HTML来说明这一点。