示例效果：

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. 洛谷 1071 潜伏者（NOIp2009提高组）

    [题意概述] 给出三行字符串,前两行代表密码与明文的对应关系,第三行为待翻译的文本.要求按照对应关系翻译文本. [题解] 直接模拟即可. 注意判断Failed的情况. #include<cstd ...

  2. 782B The Meeting Place Cannot Be Changed（二分）

    链接:http://codeforces.com/problemset/problem/782/B 题意: N个点,需要找到一个点使得每个点到这个点耗时最小,每个点都同时开始,且都拥有自己的速度 题解 ...

  3. 关于zookeeper和zkfc的一些测试

    1.停掉zookeeper集群 ****进程影响****** zkfc:报错无法连接zookeeper.ClientCnxn java.net.connectexception:拒绝连接,但不会shu ...

  4. Android第三方开源SeekBarCompat：音乐类播放器等APP进度条常用

     Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用 Android平台原生的SeekBar设计简单,然而,比如现在流行的一些音乐播放器的播放进度控制条,如果直接使 ...

  5. SGU 485 Arrays

    485. Arrays Time limit per test: 1.75 second(s)Memory limit: 262144 kilobytes input: standardoutput: ...

  6. [bzoj1176]Mokia[CDQ分治]

    啃了一天论文,发现CDQ分治的原理其实很简单,大概就是这样的一类分治:将左右区间按一定规律排序后分开处理,递归到底时直接计算答案,对于一个区间,按照第二关键字split成两个区间,先处理左区间,之后因 ...

  7. codevs1018 单词接龙

    题目描述 Description 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次), ...

  8. Linux 使用pwgen命令创建随机密码

    https://blog.csdn.net/fdipzone/article/details/73864598 http://www.netkou.com/?post=155

  9. [poj2425]A Chess Game_博弈论

    A Chess Game poj-2425 题目大意:题目链接 注释:略. 想法:这个题就是为什么必须要用记忆化搜索.因为压根就不知道后继是谁. 我们通过SG定理可知:当前游戏的SG值等于所有子游戏的 ...

  10. [poj3537]Crosses and Crosses_博弈论

    Crosses and Crosses poj-3537 题目大意:给定一个1*n的网格,每次往格子内填一个$\times$,连续的三个即可获胜. 注释:$1\le n\le 2000$. 想法:我们 ...