具有幾乎相同CSS位置的兩個div不對齊

Question

This jsfiddle說明了我在爲自己設計頁面時遇到的問題。

我有兩個div（.list和.piece），每個都在一個較大的包含div（.list-bkg和.piece-bkg）中，以創建半透明背景，覆蓋整個屏幕，當其中一個列表項被點擊並且.piece div滑落。 .list和.piece的CSS在它們的定位方面是相同的（至少是垂直方向），並且兩個-bkg div也具有相同的垂直位置。

儘管如此，出於某種原因，兩個內部divs的頂部並不對齊。我嘗試過玩弄每種遊戲的浮動效果，以及玩具箱的大小（ 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％。所以margin-top爲div price將爲width 63.71％和margin-top 5.8％的列表將爲寬度36.39％的5.8％的5.8％。因此，這兩個div的margin-top值將會不同（因爲padding基於寬度和高度），這就是爲什麼兩個div頂部不對齊的原因。爲了解決這個問題要麼降低.price的margin-top或增加.list

.price{ 
    margin-top:3.3%;// change this as you need 
} 

OR

.list{ 
    margin-top:10.1%; // change this as you need 
} 

同其他的解決辦法是增加margin-top以像素爲單位，那麼無論是div旨意正確對齊。

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); 
    }