固定div垂直對齊另一個div

nav div必須垂直固定並坐在容器div的右側。固定div垂直對齊另一個div

使用position:fixed;並將值設置爲left和top，您將div保留在相同的位置，但左值取決於父div（page-container）的居中。

<html> 
<body> 
<div id="page-container" style="width: 700px; height:1000px; margin-left: auto; margin-right: auto;background-color:moccasin;"> 

    <div class="content" style=" width: 340px; height:300px; float:left;background-color:mediumseagreen;"> 
     .content 
    </div> 

    <div class="nav" style="float:left;height: auto; width: 300px; display: block;background-color:lightblue;"> 
     .nav <br><br>This div must:<br> 
    1. be fixed vertically (if scrolling down, you should see me in the same place) <br> 
    2. be aligned to the right side of <b>content</b> 
    </div> 
</div> 
</body> 
</html>

enter image description here

來源

2011-06-29 Carlos Torres

參見：http://jsbin.com/afenip/2

/* new css */ 
.nav { 
    position: fixed; 
    margin-left: 340px; /* same as the width on .content */ 
}

來源

2011-06-29 22:34:45 thirtydot

固定div垂直對齊另一個div

回答

相關問題