水平方向中央の本文コンテンツ Div に近い左側の固定位置 Div_html/css_WEB-ITnose を設定します。-htmlチュートリアル-php.cn

水平方向中央の本文コンテンツ Div に近い左側の固定位置 Div_html/css_WEB-ITnose を設定します。

WBOY

リリース： 2016-06-24 12:06:42

オリジナル

796 人が閲覧しました

効果の例:

1. メインコンテンツの 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>

ログイン後にコピー