Question

This jsfiddle说明了我在为自己设计网页时遇到的问题。

我有两个div（.list和.piece），每个div都包含一个更大的包含div（.list-bkg和.piece-bkg）来创建半透明背景，当其中一个列表覆盖整个屏幕时单击项目，.piece div向下滑动。 .list和.piece的CSS在定位方面是相同的（至少是垂直方向），并且两个-bkg div也具有相同的垂直位置。

尽管如此，由于某种原因，两个内部div的顶部不对齐。我试过玩每个浮子，以及盒子尺寸（ as recommended here）如果有一些轻微的数学问题，但似乎没有任何效果。这是相对/绝对定位的简单问题吗？我真的在努力应对所发生的事情。所有帮助表示赞赏！

这是受影响的HTML代码：

<div class="list-bkg">
    <div class="list nav">
        <span>serious 1</span><br />
        <span>serious 2</span><br />
        <span>serious 3</span><br />
    </div>
</div>

<div class="piece-bkg">
    <div class="piece">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/7TEq3iyifpQ" frameborder="0" allowfullscreen></iframe>
        <br /> <br />
        important info<br/>
        helpful<br />
        cool<br />
    </div>
</div>

和CSS：

html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-width: 1024px;
min-height: 768px;
}
.list-bkg {
float: left;
position: absolute;
top: 0px;
z-index: 75;
width: 36.29%;
padding-top: 10%;
height: 90%;
background-color: rgba(0, 0, 0, 0.65);
font-family: monospace;
color: white;
text-align: center;
}
.piece-bkg{
float: left;
position: absolute;
top: 0px;
z-index: 75;
width: 63.71%;
padding-top: 10%;
height: 90%;
background-color: rgba(0, 0, 0, 0.65);
font-family: monospace;
color: white;
left: 36.29%;
display: none;
}
.piece {
position: relative;
margin-top: 5.8%;
height: 74%;
left: 2%;
padding-top: 2%;
padding-right: 2%;
font-size: 18px;
background-color: rgba(211, 58, 146, 0.8);
float: left;
text-align: center;
max-width: 600px;
padding-left: 2%;
}
.list {
position: relative;
margin-top: 5.8%;
height: 74%;
left: 8.97%;
width: 82%;
padding-top: 2%;
padding-right: 2%;
font-size: 18px;
text-align: right;
background-color: rgba(211, 58, 146, 0.8);
}

Answer 1

在你的风格中，div s price和list都有margin-top:5.8%。但list-bkg有width 36.29％，piece-bkg有width 63.71％。因此，div margin-top的{{1}}将是price 63.71％的5.8％，列表的width将是宽度36.39％的5.8％。因此，两个div的margin-top值将不同（因为填充基于宽度和高度），这就是为什么两个div的顶部不对齐的原因。要解决此问题，请减少margin-top的{{1}}或增加margin-top

的相同内容

.price

OR

.list

另一种解决方案是以像素为单位添加.price{ margin-top:3.3%;// change this as you need }，然后.list{ margin-top:10.1%; // change this as you need }将正确对齐。

Answer 2

你有一个基于百分比的保证金顶部，但是2个容器是不同的（因为填充是基于宽度和高度），如果你把相同的边距放在像素的顶部，两个容器将对齐

        html, body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        min-width: 1024px;
        min-height: 768px;
    }
    .list-bkg {
        float: left;
        position: absolute;
        top: 0px;
        z-index: 75;
        width: 36.29%;
        padding-top: 10%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.65);
        font-family: monospace;
        color: white;
        text-align: center;
    }

    .piece-bkg{
        float: left;
        position: absolute;
        top: 0px;
        z-index: 75;
        width: 63.71%;
        padding-top: 10%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.65);
        font-family: monospace;
        color: white;
        left: 36.29%;
        display: none;
    }

    .piece {
        position: relative;
        margin-top: 10px;
        height: 74%;
        left: 2%;
        padding-top: 2%;
        padding-right: 2%;
        font-size: 18px;
        background-color: rgba(211, 58, 146, 0.8);
        float: left;
        text-align: center;
        max-width: 600px;
        padding-left: 2%;
    }

    .list {
        position: relative;
        margin-top: 10px;
        height: 74%;
        left: 8.97%;
        width: 82%;
        padding-top: 2%;
        padding-right: 2%;
        font-size: 18px;
        text-align: right;
        background-color: rgba(211, 58, 146, 0.8);
    }

具有几乎相同的CSS位置的两个div不对齐

2 个答案: