示例效果:
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>
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号