zoukankan      html  css  js  c++  java
  • 设置靠近 水平居中的主体内容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>
  • 相关阅读:
    将本地sql文件导入到mysql中
    eclipse注释乱码问题
    导入import com.sun.image.codec.jpeg.JPEGCodec出错
    cmd启动和停止tomcat
    Tomcat修改端口
    ==和equals
    多态
    关键字——this,super,static,final
    方法重载、方法重写、四种权限修饰、JavaBean、代码块
    异常
  • 原文地址:https://www.cnblogs.com/freeliver54/p/3625099.html
Copyright © 2011-2022 走看看