设置靠近 水平居中的主体内容Div 的 左侧位置固定的Div

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體:   |    |    |  超大  

设置靠近 水平居中的主体内容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>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航