设置靠近 水平居中的主体内容Div 的 左侧位置固定的Div_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 12:06:42828瀏覽
示例效果：
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>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn