2

我已经将我的页面分成两个垂直的 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修复缓慢的错位 - 但我需要将其保留为百分比！有人能弄清楚吗？谢谢你的时间。

4

2 回答 2

1

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

MARGIN
{BORDER=0;
}
于 2013-02-25T17:10:29.513 回答
1

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

.leftpad {
padding-right: 38px;
}

和

.rightpad {
padding-right: 37px;
}

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

于 2013-02-25T21:44:19.263 回答