Question

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

您可以在左侧列的底部看到间隙：

是否清楚是什么问题？谢谢你的期待！

<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会修复不正常的错位 - 但我需要将其保留为百分比！任何人都可以解决这个问题吗？谢谢你的时间。

Answer 1

问题是由边缘边界引起的;将其设置为0或在所有方面都相同：

MARGIN
{BORDER=0;
}

Answer 2

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

.leftpad {
padding-right: 38px;
}

和

.rightpad {
padding-right: 37px;
}

如果两者相等（http://jsfiddle.net/VsJLs/1/）那么就没有失误。现在我担心以这种方式创建列 - 这是另一个问题，但是......

嵌套div的列具有相同的设置比率，呈现略微不同的高度

2 个答案: