使三个 div 完全适合 parent div

Question

我建网站的时间太长了，不知道该怎么做。我不好意思问。但我必须。

我想要一种方法，使 parent div 中任意数量的 child div 自动跨越 parent 的整个宽度div。

我对此修复的标准是：

所有 child div 的宽度必须完全相同
childrendivs的宽度必须是responsive/dynamic
我更喜欢一个不涉及坐在那里测试不同百分比以找到确切百分比宽度以防止 children 之一被包裹或隐藏的修复（IE "display: if-there-was-an-easy-fix" "width: 29.468749%")
如果修复程序适用于固定边距和动态边距（边距：10px 和边距：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>

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>

Answer 2

您要做的第一件事是删除 display: inline-block from the elements, and instead give them a float: left. From here you can get a 'default' full-width alignment by giving your elements a width of about 33.33% each. This would total 99.99%, which is 'close enough' to the full-width (unless you're on a screen of 10000px width). To ensure it's perfect though, you can use the CSS calc() property 以确保正好三分之一width: calc(100% / 3).

这适用于常规元素，但您的第二个框上也有 margin，根据 [=31=，这也会影响 width 计算]。因为您要在 both sides 上添加 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 variable 可以使这更容易，这意味着您只需要在一个地方更新 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>

使三个 div 完全适合 parent div

Making three divs fit perfectly in a parent div

html

css

width