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

【问题标题】：resizing multiple divs in absolute positioning在绝对定位中调整多个 div 的大小
【发布时间】：2014-02-27 05:39:49
【问题描述】：

我有一个小问题，我有 4 个 div，它们具有 50 像素的固定宽度和高度，并且绝对定位。示例布局为 2 x 2。

它们是手动定位的，它们之间有 10 像素的间隙。问题是，如果我需要调整框的大小，我将不得不单独调整它们的大小并重新计算它们之间的空间，因为它们是绝对定位的，并且我拥有的 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;
}

【问题讨论】：

我的第一个问题是它们真的必须是 position: absolute; 吗？你想要的视觉和功能结果是什么，因为我敢打赌你可以用不同的方式做到这一点。表格单元听起来可能适用。
调整框的大小是什么意思？
请问为什么div是绝对定位的？
您好，它们需要绝对定位，因为我将其用作更大项目的一部分，在该项目中我正在布置这些框来代表餐厅的桌子。我不能使用浮点数，因为它们必须专门定位在它们嵌套的 div 中。
@TJXStyles 如果您正在绘制图片/平面图，最好使用矢量 SVG 或其他图像。

标签： html css sass

【解决方案1】：

您可以尝试使用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，但这篇文章看起来不错）

编辑：Cinnamon 指出，根据使用情况，表格可能会令人沮丧。在决定使用哪种方法之前，请先看看这个Stackoverflow question。

祝你好运。

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

【讨论】：

永远不要推荐用于布局的表格。请不要为信誉不佳的来源提供额外的页面排名（请参阅：w3fools.com）。
@cimmanon 为什么你不应该使用表格进行布局？尽管如此，我还是提供了另外两个解决方案。至于链接 w3schools，我鼓励您阅读该页面并发现任何问题。我轻轻松松地检查了一下，对我来说似乎很好。如果没有，我还提供了 Temple.edu 的附加链接，以防您错过。
这是哪一年我们仍然有人问为什么你不应该使用表格进行布局？我的意思是，除了 W3C 说不支持HTML 4 specification 的事实之外？ stackoverflow.com/questions/83073/…
@cimmanon，感谢您的回复。我将在您与我共享的此链接中进行编辑。尽管如此，OP 从未说过他将其用于页面布局，因此我会将其保留在我的答案中，以防它适合他/她的需要。
表格只能用于保存表格数据，如 Excel 表格。如果您需要或想要表格的功能来进行布局，请使用 div 并使用 display: table/table-cell 来模仿 div 的表格功能。