您的位置：首页 > 其它

浏览器窗口小化时div相对位置不变

2014-04-02 16:55 134 查看

无论浏览器的窗口怎么变化，div的相对位置不变，position:relative;父div定义这个，然后再去用绝对定位跟相对定位，子div就是跟着父div的左上角了，如果不事先定义的话，那绝对定位跟相对定位只能相对于body来定位了！这样，当窗口缩小时，所有的div排列正常！

<html>

<head>

<title>主页面</title>

<style>

body{

margin:0px;

width:1350px;

min-width:1024px;

max-width:100%;

height:100%;

background-color:#F0F0F0;

}

#head{

background-color:#FFFF00;

width:1350px;

height:100px;

min-width:1024px;

}

#center{

background-color:#00FFFF;

width:1350px;

min-height:100%;

position:relative;

min-width:1024px;

}

#foot{

background-color:#FF00FF;

width:1350px;

height:100px;

min-width:1024px;

}

#left{

width:150px;

height:100%;

background-color:#EEEEEE;

position:absolute;

margin-left:60px;

}

#main{

width:924px;

height:100%;

background-color:#EE00FF;

position:absolute;

margin-left:210px;

}

#right{

width:150px;

height:100%;

background-color:#EEFF00;

position:absolute;

margin-left:1134px;

}

</style>

</head>

<body>

<thead>

<div id="head">

你好

</div>

</thead>

<tbody>

<div id="center">

<div id="left"></div>

<div id="main"></div>

<div id="right"></div>

</div>

</tbody>

<tfoot>

<div id="foot">大家好</div>

</tfoot>

</body>

</html>

效果图如下：

浏览器窗口大小正常时

当窗口缩小后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航