为什么left和right不在同一水平上？
为什么left和right不在同一水平上？
qq_慕移动7271509
2019-08-02
3 回答
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>混合布局编程挑战</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 30px;
color: #fff
}
.top {
height: 100px;
background: #ccc
}
.left {
width: 200px;
height: 500px;
background: blue;
}
.right {
position: absolute;
left: 210px;
right: 0;
height: 500px;
background: #9C9;
}
.foot {
height: 50px;
background: #F63
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</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>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;height:100px; background:#ccc;}
.main{width:100%;height:600px; background:red;}
.left{height:600px;width:29%;background:blue; float:left;}
.right{height:600px;width:70%;background:green; float:right;}
.foot{width:100%;height:50px;background:orange;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
因为是先加载right后加载left，right没有浮动，因此要占一整行，left就被挤下去了。要达到效果可以把left变为绝对定位。代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff;}
.top{height:100px; background:gray;}
.main{ background:red;}
.left{height:500px; width:200px; background:blue; position:absolute; top:100px; left:0;}
.right{height:500px; margin-left:210px; background:green;}
.foot{height:50px; background:orange; clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
举报
0/150
提交
取消
