61,112
社区成员
发帖
与我相关
我的任务
分享margin-leftL:-100% 和margin-right100%的区别
/*margin-leftL:-100% 和margin-right100%的区别*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏等高(wwww.hemin.cn)</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:18px;
font-family:"新宋体";
}
body {
min-width: 850px;
width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" );
}
.Top{
background:#999;
height:100px;
}
.Middle,.Left,.Right{
float:left;
padding-bottom: 32767px;
margin-bottom:-32767px;
}
.Content{
overflow:hidden;
padding:0 250px 0 300px;
zoom:1;position:relative;
}
.Middle{
background:#090;
width:100%;
}
.Left{
background:#333;
width:300px;
margin-left:-100%;
position:relative;
right:300px;
_left:250px;
}
.Right{
background:#666;
width:250px;
margin-right:-100%;
}
</style>
</head>
<body>
<div class="Top">顶部</div>
<div class="Content">
<div class="Middle">中间</div>
<div class="Left">左边</div>
<div class="Right">右边<br /><br /><br /></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏等高(wwww.hemin.cn)</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:18px;
font-family:"新宋体";
}
body {
min-width: 850px;
width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" );
}
.Top{
background:#999;
height:100px;
}
.Middle,.Left,.Right{
float:left;
padding-bottom: 32767px;
margin-bottom:-32767px;
}
.Content{
overflow:hidden;
padding:0 250px 0 300px;
zoom:1;position:relative;
}
.Middle{
background:#090;
width:100%;
}
.Left{
background:#333;
width:300px;
margin-left:-100%;
position:relative;
right:300px;
_left:250px;
}
.Right{
background:#666;
width:250px;
margin-right:-100%;
}
</style>
</head>
<body>
<div class="Top">顶部</div>
<div class="Content">
<div class="Middle">中间</div>
<div class="Left">左边</div>
<div class="Right">右边<br /><br /><br /></div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
lizp2020 2011-01-23
- 打赏
- 举报
负值有时候是正值做不到的，
榕树花园 2011-01-20
- 打赏
- 举报
这个问题我可能也说不太清楚，但我知道一点，负值有时候是正值做不到的，比如说一行文字它偏偏非要往上偏移5相素，这时候你就想让它往下移动5朴素复位，但你用正值就不可能做到了，这时候，负值可以大显身手，设负值5个朴素，它马上老老实实往下跑5个朴素，从而复位。
86y 2011-01-20
- 打赏
- 举报
适合左右布局，左右固定或右边固定。
linshenxiu 2011-01-19
- 打赏
- 举报
两个层并排，给右边的层设置margin-left:-100px，右边的层盖住左边的层100px。给右边的层设置margin-right:100px，两个层同时往左错100px。
