Html 具有相同设置比率的嵌套div列在稍微不同的高度渲染
我已经将页面拆分为两个垂直div，每个div都包含一些嵌套的div，这些div被包装起来，这样它们就可以按照设定的比率调整大小。这很好用——但由于某种原因，左边的div比右边的div短！CSS是一致的，但有些东西不是 您可以在此处看到左侧立柱底部出现一个间隙： 很清楚出了什么问题吗？谢谢你的关注Html 具有相同设置比率的嵌套div列在稍微不同的高度渲染,html,css,page-layout,Html,Css,Page Layout,我已经将页面拆分为两个垂直div，每个div都包含一些嵌套的div，这些div被包装起来，这样它们就可以按照设定的比率调整大小。这很好用——但由于某种原因，左边的div比右边的div短！CSS是一致的，但有些东西不是 您可以在此处看到左侧立柱底部出现一个间隙： 很清楚出了什么问题吗？谢谢你的关注 <head> <style type="text/css"> .break { padding-top: 25px; } .leftcol { width: 50%; posi
<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>
.休息{
填充顶部：25px；
}
leftcol先生{
宽度：50%；
位置：绝对位置；
顶部：0px；
左：25px；
}
.leftpad{
右边填充：38px；
}
rightcol先生{
宽度：50%；
位置：绝对位置；
顶部：0px；
右：25px；
}
.rightpad{
左侧填充：37px；
}
.包装纸{
宽度：100%；
显示：内联块；
位置：相对位置；
}
.包装工：之后{
垫面：161.3%；
显示：块；
背景色：红色；
内容：''；
}
我尝试过按照下面的建议将利润率归零，但这并不能改善情况。问题似乎在于
填充顶部：161.3%属性。将%
更改为px
可以修复逐渐出现的错位-但我需要将其保留为百分比！有人能弄明白吗？谢谢您的时间。该问题是由边距边界引起的；将其设置为0或各边相同：
MARGIN
{BORDER=0;
}
我明白了-我的意思是：我知道这个问题，但我仍然不知道为什么。。。我创建的排水沟裂开得不均匀：
.leftpad {
padding-right: 38px;
}
及
如果两者相等（），则不会出现滑动。现在我担心以这种方式创建列-这是另一个问题…一个友好的建议-请避免在StackOverflow上使用所有大写，因为这通常被认为是不专业的。非常感谢这两个方面-我很不好意思问，但您能将其放在上面的JSFIDLE中并重新发布吗？我试过定义边际，但看不到任何变化。不过这似乎很有希望，谢谢。
.rightpad {
padding-right: 37px;
}