設置靠近 水平居中的主體內容Div 的 左側位置固定的Div


示例效果:

1.主體內容的divMain 水平居中;

2.divLeft 靠近divMain ,位置固定,不隨垂直滾動條而動;

 

 

相關代碼:

<html>
<head runat="server">
    <title>設置靠近主體內容的左側固定位置的Div</title>

<style>
#divLeft
{
    position:fixed;/* 固定位置 */
    top:200px;
    border:solid 1px #ccc; 
    width:150px;
    height:500px;
}    

#divMain{
     width:918px;
     height:2000px;
     border:solid 1px #ccc;
     margin:0 auto;/* 水平居中 */

}

</style>



</head>
<body  onresize="setDivLeftPosition();" >

<div id="divMain">

</div>

<div id="divLeft">
    左側固定位置
</div>


</body>
</html>

<script  type="text/javascript">
    //動態調整左側Div的位置
    function setDivLeftPosition() {
        var divMain = document.getElementById("divMain");
        document.getElementById("divLeft").style.left = (divMain.offsetLeft - 155) + "px";
    }
    setDivLeftPosition();


    //        var top, left;
    //        if (div.currentStyle) { left = div.currentStyle.left; top = div.currentStyle.top; }
    //        else if (window.getComputedStyle) { left = window.getComputedStyle(div, null).left; top = window.getComputedStyle(div, null).top; }
    //        alert(left + "," + top);


</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM