1
我目前正试图设计一个只使用HTML和CSS（CSS3，包括Flexbox）的Mendeleiev表。 基本上我需要每个框都是窗口宽度的1/18〜5.55％才能做出响应。 但是，CSS似乎高度错误地计算了这个值。为什么当它们的组合宽度应该是99％时，我的列将换行换行？
这里是我的代码示例
body {
size: 15px;
background: #ff9999;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.line {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.box {
border: 1px solid #000000;
padding: 10px;
position: relative;
width: 5.56%;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.weight {
font-size: 10px;
text-align: right;
}
.el {
font-size: 25px;
text-align: center;
font-weight: bold;
}
.no {
font-size: 10px;
text-align: left;
}
.right {
justify-content: flex-end;
}
.wrap {
flex-wrap: wrap;
}<div class="container">
<!-- Debut 4e ligne -->
<div class="line wrap">
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
4.00
</div>
<div class="el">
He
</div>
<div class="no">
2
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
</div>
<!-- Fin 4e ligne -->
<div class="line">
</div>
<div class="line">
</div>
<div class="line">
</div>
</div>这是非常重复性（18列），但你应该粘贴时看到，有4盒，将不适合即使在总数为18 * 5.55％= 99.9％的情况下（通过挠曲包装验证）。
为什么这样的区别？
你得5.56％有 - 18倍，超过100％ –
的确，但我也尝试了5.55％，并且它仍然是相同的 - 即使如此，这样的一点区别应该只推动最后一个元素到下面的l ine，所以这不是原因中的主要问题... –
尝试将其设置为5.4，如果不适合，则将其进一步缩小。最后，您可以将所有框放在中间并用空白区域覆盖空白区域以隐藏边距 – Tinsten