Question

我一直在为 way 构建网站太长时间，不知道如何做到这一点。我很尴尬地问。但我必须。

我想要一种方法让父div中的任意数量的子div自动跨越父div的整个宽度。

我对此修复的标准是：

所有子div必须是完全相同的宽度
子div的宽度必须是响应/动态
我更喜欢一种不涉及坐在那里并测试不同百分比的修复，以找到确切的百分比宽度，以防止其中一个孩子被包裹或隐藏（IE“显示：if-there-a-easy-修复“而不是”宽度：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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

您要做的第一件事就是从元素中删除 display: inline-block ，然后为他们提供 float: left 。在这里，您可以通过为元素提供每个约33.33%的 width 来获得“默认”全宽对齐。总共99.99%，与全宽“足够接近”（除非您在10000px宽度的屏幕上）。要确保它是完美的，您可以使用CSS calc() property 来确保完全三分之一width: calc(100% / 3)

这适用于常规元素，但您的第二个框也有margin，它也会根据 box model width计算因素>。由于您在双方上添加了5%页边距，因此您需要从此元素的10%计算中减去总计width。这可以使用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>

如果您想更改元素数量，只需更新每个3计算中的width即可反映兄弟姐妹的数量。使用 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>

Answer 3

这是flexbox layout的简单任务：

#wrap {
  width: 100%;
  max-width: 500px;
  background-color: gray;
  height: 200px;
  display: flex;
}

.box {
  flex: 1;
  margin: 0 5%;
}

#one {
  background-color: aliceblue;
}

#two {
  background-color: wheat;
}

#three {
  background-color: coral;
}
#four {
  background-color: pink;
}

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

使三个div完全适合父div

3 个答案: