子元素将转到新行，即使它们不超过父宽度

Question

我试图让我的 3 张牌在同一行中。 我用他们的margin计算每个孩子的width，结果是容器元素的确切大小width。 那么为什么一条线上没有3张牌呢？ 问题出在哪里，我怎样才能设法让它与 3 个元素一起工作，以及容器和元素的确切大小？

* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.container {
max-width: 1230px;
width: 100%;
margin: 0 auto;
height: 100%;
}
.cards-wrapper {
background: orange;
}
.cards {
background: blue;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.card {
height: 225px;
width: 370px;
border: 1px solid red;
margin: 29px 30px;
}

<div class="container">
<div class="cards">
<div class="card">
<img src="./img/icon1.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon2.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon3.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon4.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon5.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon6.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
</div>
</div>

https://codepen.io/simonika/pen/ZEQBxZj

Answer 1

两件事：

1.( 向所有内容添加box-sizing: border-box;(使用*选择器(以在宽度中包含边框。

2.( 为相邻项目添加左/右侧边距，因此仅为最后一个/第三个项目设置 30pxmargin-right，如下所示：

* {
box-sizing: border-box;
}
.container {
max-width: 1230px;
width: 100%;
margin: 0 auto;
height: 100%;
}
.cards-wrapper {
background: orange;
}
.cards {
background: blue;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.card {
height: 225px;
width: 370px;
border: 1px solid red;
margin: 29px 30px;
margin-right: 0;
}
.card:nth-of-type(3n) {
margin-right: 30px;
}

<div class="container">
<div class="cards">
<div class="card">
<img src="./img/icon1.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon2.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon3.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon4.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon5.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon6.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
</div>
</div>

Answer 2

你的数学错了。您需要将每行的左/右边距分解六次，这将使您的 30px 降低到 20px，然后考虑它们变为 19px 的边框。

1230 - 370(3) = 120 // total remaining space
120 / 6 = 20 // left and right margin size

.container {
max-width: 1230px;
width: 100%;
margin: 0 auto;
height: 100%;
}
.cards-wrapper {
background: orange;
}
.cards {
background: blue;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.card {
height: 225px;
width: 370px;
border: 1px solid red;
margin: 29px 19px;
}

<div class="container">
<div class="cards">
<div class="card">
<img src="./img/icon1.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon2.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon3.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon4.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon5.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon6.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
</div>
</div>

请注意，如果将box-sizing设置为border-box，则可以省略计算的边框部分

Answer 3

问题是你的类.card中的边距，因为边距被添加到div之间的空间中。 我将边距更改为 0，您可以使用填充在边框卡和内容卡之间创建一个空格。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.container {
max-width: 1230px;
width: 100%;
margin: 0 auto;
height: 100%;
}
.cards-wrapper {
background: orange;
}
.cards {
background: blue;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.card {
height: 225px;
width: 370px;
border: 1px solid red;
margin: 0px 0px; //MARGIN 0
}

<div class="container">
<div class="cards">
<div class="card">
<img src="./img/icon1.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon2.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon3.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon4.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon5.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
<div class="card">
<img src="./img/icon6.png" alt="" class="icon">
<img src="./img/line-white.png" alt="" class="line">
<p>bla</p>
</div>
</div>
</div>