示例效果：

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>

设置靠近 水平居中的主体内容Div 的 左侧位置固定的Div的更多相关文章

  1. JQuery实现点击div以外的位置隐藏该div窗口

    简单示例代码: <body> <script type="text/javascript" src="http://ajax.googleapis.co ...

  2. div box container随主体内容自动扩展适应的实现

    /**顶部部分*/ .con-tl{ background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0); padding-left: ...

  3. SharePoint 2010 master page 控件介绍(3) :页面主体内容

    转:http://blog.csdn.net/lgm97/article/details/6409217 <!-- =====  页面滚动区域开始  ====================== ...

  4. 设置一个元素的HTML内容

    问题 你需要一个元素中的HTML内容 方法 可以使用Element中的HTML设置方法具体如下: Element div = doc.select("div").first(); ...

  5. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  6. 内容高度小于窗口高度时版权div固定在底部

    <!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...

  7. 设置cxGrid中RichEdit输入内容的格式

    设置cxGrid中RichEdit输入内容的格式 (2013-09-05 23:25:31) 转载▼红鱼儿新浪博客   分类: Delphi 遇到这样的问题,利用cxGrid,将一列定义为RichEd ...

  8. jQuery.ajax() 设置 Headers 中的 Accept 内容

    jQuery.ajax() 如何设置 Headers 中的 Accept 内容   其实很简单,首先如果是常见类型,则请直接设置 dataType 属性 $.ajax({ dataType: &quo ...

  9. 大div中，三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【Codeforces 1091D】New Year and the Permutation Concatenation

    [链接] 我是链接,点我呀:) [题意] 把1~n的n!种排列依次连接成一个长度为nn!的序列. 让你在这个序列当中找长度为n的连续段,使得连续段中的数字的和为n(n-1)/2 输出符合要求的连续段的 ...

  2. iframe 与frameset

    frameset 元素可定义一个框架集.它被用来组织多个窗口(框架).每个框架存有独立的文档.在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行.您必须使用 cols 或 ...

  3. 用Windows自带DOS命令提示符 制作U盘启动盘

    Windows & DOS命令提示符 & U盘 & 启动盘 用Windows自带DOS命令提示符 制作U盘启动盘.docx http://xgqfrms.blog.163.co ...

  4. 回文质数 USACO

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 因为 151 既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 15 ...

  5. PostGIS学习相关术语

    POI 兴趣点(英语:point of interest,通常缩写成POI)乃是电子地图上的某个地标.景点,用以标示出该地所代表的政府部门.各行各业之商业机构(加油站.百货公司.超市.餐厅.酒店.便利 ...

  6. 一篮子苹果，每天吃一半多一个吃，第十天吃一半多一个后就剩余一个，求一共多少个苹果，JAVA版

    /** * @author xuzhu **/public class TestApple { public static void main(String[] args) { int days = ...

  7. 上帝说：要约炮！于是有了XMPP

    一.导入XMPP框架 下载 XMPPFramework 框架 GitHub: XMPPFramework 导入依赖框架 CocoaLumberjack : 日志框架 CocoaAsyncSocket  ...

  8. 非常适合新手的jq/zepto源码分析04

    $.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean ...

  9. C#之反射（PropertyInfo类）

    1.引入命名空间:System.Reflection:程序集:mscorlib(在mscorlib.dll中) 2.示例代码(主要是getType().setValue().getValue()方法) ...

  10. Linux安装MATLAB

    Linux下的MATLAB在2013a及以后的版本中,就不再支持32位机了.所以32位Linux系统无法安装2013a及以后版本.[1] Linux下安装MATLAB时,需要先配置好JRE,可以参考: ...