将三个div完美地放入父div中

Question

我已经建立网站很长时间了，不知道如何做这件事情非常尴尬，但我必须问一下。

---

我想找到一种方法，使父级div中的任意数量的子div自动跨越整个父div的宽度。

我对此修复的标准是：

1. 所有子div的宽度必须完全相同
2. 子div的宽度必须是响应式/动态的
3. 我希望修复程序不需要反复测试不同百分比，以找到确切的百分比宽度以防止其中一个子项被包装或隐藏（即“display: if-there-was-an-easy-fix”而不是“width: 29.468749%”）
4. 我希望该修复程序可以与固定和动态边距一起使用（margin: 10px和margin: 5%）

我有99％的把握，大约在一年前我已经知道答案了，但我的当前工作主要使用表格，所以我忘记了如何做任何不瑞士军刀式且语义不好的东西。

#wrap {
  width: 100%;
  max-width: 500px;
  background-color: gray;
  height: 200px;
  display: block;
}

.box {
  width: 29.468749%;
  height: 200px;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none;
}

#one {
  background-color: aliceblue;
}

#two {
  margin: 0 5%;
  background-color: wheat;
}

#three {
  background-color: coral;
}

<div id="wrap">
  <div class="box" id="one">
  </div>
  <div class="box" id="two">
  </div>
  <div class="box" id="three">
  </div>
</div>

- S. Ling

Answer 1

在父元素上使用display: flex，在子元素上使用flex: 1来实现flexbox布局。

#wrap {
  width: 100%;
  max-width: 500px;
  background-color: gray;
  height: 200px;
  /*display:block;*/
  display: flex;
}

.box {
  /*width: 29.468749%;*/
  /*display:inline-block;
    /*margin:0;
    padding:0;*/
  flex: 1;
  height: 200px;
  border: none;
}

#one {
  background-color: aliceblue;
}

#two {
  margin: 0 5%;
  background-color: wheat;
}

#three {
  background-color: coral;
}

<div id="wrap">
  <div class="box" id="one">
  </div>
  <div class="box" id="two">
  </div>
  <div class="box" id="three">
  </div>
</div>

- Sreekanth Reddy Balne

---

是的。非常简单。在我忘记其他所有东西之前，我需要摆脱这些表格... - S. Ling

但您必须摆脱所有不必要的代码，例如宽度。 - Temani Afif

Answer 2

首先，您需要从元素中删除display: inline-block，而是给它们一个float: left。从这里开始，您可以通过给元素width设置约为33.33％的宽度来获得“默认”的全宽对齐方式。这将总共占用99.99％，足以接近全宽（除非您使用10000px宽度的屏幕）。然而，为了确保完美，您可以使用CSS calc()属性来确保其宽度为width: calc(100% / 3)，恰好为三分之一。

这适用于普通元素，但是您的第二个框也有margin，根据盒模型的规定，它也会影响width计算。因为您在两侧添加了5%的边距，所以您需要从width计算中减去总共10%。可以使用width: calc((100% / 3) - (5% * 2))来实现这一点。

这样可以让您拥有三个等宽的元素，其中一个元素具有额外的边距，如下图所示：

#wrap {
  width: 100%;
  max-width: 500px;
  background-color: gray;
  height: 200px;
  display: block;
}

.box {
  width: calc(100% / 3);
  height: 200px;
  margin: 0;
  padding: 0;
  border: none;
  float: left;
}

#one {
  background-color: aliceblue;
}

#two {
  margin: 0 5%;
  width: calc((100% / 3) - (5% * 2));
  background-color: wheat;
}

#three {
  background-color: coral;
}

<div id="wrap">
  <div class="box" id="one">
  </div>
  <div class="box" id="two">
  </div>
  <div class="box" id="one">
  </div>
</div>

如果您想改变元素的数量，只需更新每个“width”计算中的“3”，以反映同级元素的数量。使用CSS变量可以更轻松地完成此操作，这意味着您只需要在一个地方更新CSS：

:root {
  --columns: 3;
}

#wrap {
  width: 100%;
  max-width: 500px;
  background-color: gray;
  height: 200px;
  display: block;
}

.box {
  width: calc(100% / var(--columns));
  height: 200px;
  margin: 0;
  padding: 0;
  border: none;
  float: left;
}

#one {
  background-color: aliceblue;
}

#two {
  margin: 0 5%;
  width: calc((100% / var(--columns)) - (5% * 2));
  background-color: wheat;
}

#three {
  background-color: coral;
}

<div id="wrap">
  <div class="box" id="one">
  </div>
  <div class="box" id="two">
  </div>
  <div class="box" id="one">
  </div>
</div>

- Obsidian Age

---

OP要求“使父div中的任意数量的子div自动跨越整个父div的宽度”，而不仅仅是3个。 - Sreekanth Reddy Balne

^只需更改计算中的除法运算符，以反映出您有多少个孩子。我会更新我的答案明确说明这一点，尽管我不认为这足以被降分。 - Obsidian Age

如果你只需要一个赞，那么给你。flexbox 在 IE 11.0 及以上版本中被支持。 - Sreekanth Reddy Balne

@obsidian age，我的问题是，即使您说“margin: 0; padding: 0;”，div也会换行，除非您像我上面所做的那样：坐在那里并测试每个小数点的完美宽度。如果您查看我的代码片段，29.468749％不仅仅是随机的，而是我可以使div在换行之前的绝对最宽处。这只是令人讨厌的耗时...我不知道计算中发生了什么，我以前从未在CSS中使用过这些，但是您不必执行((100％-5％*2)/var(--columns))吗？您当前的设置会给您23.33，因为您从每个框的宽度中减去边距，对吧？ - S. Ling

其实，我刚刚意识到中间的子元素会更瘦，因为你最终会在ID上重新定义宽度为100％，然后仅从#two的宽度中减去边距。是否可以为边距设置第二个变量，然后在.box上使用类似于“calc((100%-var(--margins))/var(--columns))”的宽度？ - S. Ling