為什么left和right不在同一水平上？
為什么left和right不在同一水平上？
qq_慕移動7271509
2019-08-02
3 回答
舉報
0/150
提交
取消
2019-10-19
<!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>2019-08-10
<!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>
2019-08-07
因為是先加載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>