Html 为页脚中的4个div设置响应布局。需要在相对于页脚边缘的所有边上居中

在一个页脚中，有4个小框，它们周围有一个红色边框，当重新调整浏览器窗口的大小时，它们都需要响应浏览器窗口的宽度。无论窗口大小如何，它们都需要居中，并且彼此之间有相等的百分比空间。盒子必须保持100像素乘以100像素

以下是我的意思的粗略说明：

页脚{ 宽度：100%； 明确：两者皆有； 文本对齐：居中； 背景色：黑色； 不透明度：0.7； 高度：200px； } fbox1{ 边框：5px，ea2f2f； 宽度：100px； 高度：100px； 位置：内联块； 浮动：左； } fbox2{ 边框：5px，ea2f2f； 宽度：100px； 高度：100px； 位置：内联块； 浮动：左； } fbox3{ 边框：5px，ea2f2f； 宽度：100px； 高度：100px； 位置：内联块； 浮动：左； } fbox4{ 边框：5px，ea2f2f； 宽度：100px； 高度：100px； 位置：内联块； 浮动：左； } //HTML块

<div id="footer">
    <div class="fbox"></div>
    <div class="fbox"></div>
    <div class="fbox"></div>
    <div class="fbox"></div>
<div>

---

如果出于兼容性原因而无法使用flex box，请选择：

块之间空间宽度的公式为页脚宽度-4*box\u宽度/5。基本上你有一个百分比宽度减去一个固定宽度：页脚宽度/5-4*box\u宽度/5-> 页脚宽度的20%-4*110px/5->20%-88px。请注意，由于边界的原因，方框实际上占用了110px的空间。我们至少可以通过两种方式做到这一点：

使用浮点：

每个盒子之间需要20%-88像素。将每个方框向左浮动，留有20%的余量。然后通过在每个框上设置负右边距将框向左拉。这不会影响第一个长方体，但会使长方体之间的间距正确，因此将所有长方体相对放置，并将其移动到88像素以上的左侧

#footer {
    width: 100%;
    clear: both;
    background-color: black;
    opacity: 0.7;
    height: 200px;
    box-sizing: border-box;
    position: relative;
}

div div {
    border: 5px outset #ea2f2f;
    width: 100px;
    height: 100px;
    float:left;
    margin-left:20%;
    margin-right:-88px;
    position:relative;
    left:-88px;
    top:45px;
}

这种方式让我觉得有点脆弱，但我不能马上明白为什么

使用绝对定位：

每个盒子之间需要20%-88像素。从第一个框开始。将其移动到20%以上，然后使用left和margin left属性返回到left 88px。下一个盒子我们需要移动相同的，但是从第一个盒子的右边缘，所以我们需要移动它超过20%-88px+110px，到达第一个盒子的右边缘，然后再次移动+20%-88px，得到40%-66px。对每个框重复上述步骤。你可以看到下面的模式。注意页脚上的位置：相对

您还可以将内联块与文本对齐：对齐一起使用，如下所示：

希望这有帮助

编辑：

---

刚刚注意到你的要求，他们是垂直居中以及。在本例中，因为您有一个固定高度的容器和固定高度的框，所以在上述两种情况下，您只需将每个框向下移动200px-110px/2=45px，这可以通过top:45px；完成

有两种非常简单的方法可以做到这一点

如果您的目标是现代浏览器，那么您可以使用CSS3 flex模型。这是最简单的方法。您不必更改标记中的任何内容。当然，我建议使用footer标记而不是div，因为它在语义上是一个footer。 在这个例子中，我之所以省略浏览器前缀，有两个原因：1.这个代码段很简洁，2.现在大多数现代浏览器都不需要前缀。这个示例代码片段与IE-11、FF-34和GC-39中的代码片段一样完美

诀窍是使用justify内容：周围的空间；属性在div之间均匀分布间距。请记住，周围的空格将导致第一个div之前的空格和最后一个div之后的空格为div之间间距的一半。由于div的大小，这将导致最后一个div之后的间距变大。要缓解此问题，请使用margin:auto

参考：

以及：

小提琴：

片段：

页脚{ 背景色：000；不透明度：0.7； 高度：200px； 显示器：flex； 调整内容：周围的空间；/*这很重要*/ 对齐项目：居中；文本对齐：居中； } 页脚>div{ 边框：1px纯红； 宽度：100px；高度：100px； 边距：0自动；/*这很重要*/ }

---

将每个框的宽度设置为22%左右，框必须保持100px×100pxHmm，尝试将每个框的边距设置为边距：1em auto 1em auto；可能工作可能不工作您应该创建一个表，其中包含一行4个单元格，并在每个单元格的中心对齐处放置一个div。将表格宽度设置为页脚的100%。尽管表格用于表格数据，但此解决方案是最好的，与较新的display:flex甚至display:table不同，每个浏览器都支持该标记。请提供有关此处发生的情况的说明，并确保提供注释。此外，-webkit-前缀属性应该放在非前缀属性之前。这种支持浏览器的方式，例如29版的Chrome，将使用无前缀的标准属性。

#footer {
    width: 100%;
    clear: both;
    background-color: black;
    opacity: 0.7;
    height: 200px;
    box-sizing: border-box;
    position: relative;
}

div div {
    border: 5px outset #ea2f2f;
    width: 100px;
    height: 100px;
    float:left;
    margin-left:20%;
    margin-right:-88px;
    position:relative;
    left:-88px;
    top:45px;
}

#footer {
    width: 100%;
    clear: both;
    background-color: black;
    opacity: 0.7;
    height: 200px;
    box-sizing: border-box;
    position: relative;
}

div div {
    border: 5px outset #ea2f2f;
    width: 100px;
    height: 100px;
    position: absolute;
    top:45px;
}

#fbox1 {
    left: 20%;
    margin-left: -88px;
}

#fbox2 {
    left: 40%;
    margin-left: -66px;
}

#fbox3 {
    left: 60%;
    margin-left: -44px;
}

#fbox4 {
    left: 80%;
    margin-left: -22px;
}