具有相同设置比率的嵌套 div 列在稍微不同的高度渲染答案

【问题标题】：Columns of nested divs with the same set ratio rendering at slightly different heights具有相同设置比率的嵌套 div 列在稍微不同的高度渲染
【发布时间】：2019-01-20 12:52:10
【问题描述】：

我已将我的页面分成两个垂直 div，每个都包含许多嵌套的 div，以便它们调整大小以保持设定的比例。这很好用——但由于某种原因，左边的 div 比右边的 div 最终短！ CSS 是一致的，但有些不一致...

您可以在此处看到左侧列的底部出现一个间隙：

http://jsfiddle.net/VsJLs/

清楚有什么问题吗？感谢您的关注！

<head>
<style type="text/css">
.break {
padding-top: 25px;
}
.leftcol {
width: 50%;
position: absolute;
top: 0px;
left: 25px;
}
.leftpad {
padding-right: 38px;
}
.rightcol {
width: 50%;
position: absolute;
top: 0px;
right: 25px;
}
.rightpad {
padding-left: 37px;
}
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 161.3%;
display: block;
background-color: red;
content: '';
}
</style>
</head>

<body>

<div class="leftcol">
<div class="leftpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>

<div class="rightcol">
<div class="rightpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>

</body>
</html>

我已尝试按照以下建议将边距归零，但这并没有改善情况。似乎问题可能出在padding-top: 161.3%; 属性上。将% 更改为px 可以修复这种缓慢的错位 - 但我需要将其保留为百分比！有人能弄清楚吗？感谢您的宝贵时间。

【问题讨论】：

标签： html css page-layout

【解决方案1】：

问题是由于margin边框引起的；将其设置为 0 或在所有方面都相同：

MARGIN
{BORDER=0;
}

【讨论】：

stackoverflow.com/questions/15072409/…
一个友好的建议 - 请避免在 StackOverflow 上使用全部大写，因为它通常被认为是不专业的。
非常感谢 - 我不好意思问，但你能把它放在上面的 jsfiddle 中并重新发布吗？我试过定义边距，但看不到任何变化。不过，这似乎很有希望，谢谢。

【解决方案2】：

我想通了 - 我的意思是：我知道问题所在，但我仍然不确定为什么...我创建的排水沟不均匀地分开：

.leftpad {
padding-right: 38px;
}

和

.rightpad {
padding-right: 37px;
}

如果两者相等 (http://jsfiddle.net/VsJLs/1/)，则不会出现错误。现在我担心以这种方式创建列 - 这是另一个问题......

【讨论】：