且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

两个div元素,一个在中心,另一个在右边

更新时间:2022-12-11 11:17:12

这是我的目标:

HTML b
$ b

HTML

​<div id="container">
    <div id="right">
        <div id="right_content">sdfdsfdfg</div>        
    </div>
    <div id="main">sdfdsfdzgf</div>
</div>

CSS

html,body { height: 100% }
#container { height: 100%; background: #ccc; }

#right {
    position:absolute;
    left: 50%;
    right: 0;
    height: 100%;
    background: #f00;
    z-index: 0;
}

#right-content {
    position: absolute;
    left: 150px; /* half the width of #main */
}

#main {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 100%;
    background: #00f; 
    z-index: 1;    
}

http://jsfiddle.net/XPE3w/3/