ホームページ > ウェブフロントエンド > htmlチュートリアル > 水平方向中央の本文コンテンツ Div に近い左側の固定位置 Div_html/css_WEB-ITnose を設定します。

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

WBOY
リリース: 2016-06-24 12:06:42
オリジナル
842 人が閲覧しました

効果の例:

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>
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート