橫向兩列布局
<!DOCTYPE HTML>
<html>
? ? <head>
? ? <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
? ? ? ? ?<title>橫向兩列布局</title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? *{margin:0;padding:0;}
? ? ? ? ? ? #wrap{width:960px;text-align:center;background:#ccc;margin:0 auto;}
? ? ? ? ? ? #header{height:30px;background:orange;}
? ? ? ? ? ? #mainBody{height:500px;width:100%;background:yellow;overflow:hidden;}
? ? ? ? ? ? .left{width:700px;height:150px; background:black;float:left;}
? ? ? ? ? ? .right{height:500px;background:green;float:right;margin-left:710px;}
? ? ? ? ? ? #footer{height:100px;background:purple;bottom:0;}
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <div id="wrap">
? ? ? ? ? ? <div id="header">header</div>
? ? ? ? ? ? <div id="mainBody">mainBody
? ? ? ? ? ? ? ? <div class="left">left</div>
? ? ? ? ? ? ? ? <div class="right">right</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div id="footer">footer</div>
? ? ? ? </div>
? ? </body>
</html>為什么我右邊的視圖出來沒有right呢，？？
2016-04-06
把margin-left:710px;改成margin-left:10px；就可以了 ? 按照你原先的寫法 中間的間距有710PX 那么大
2016-03-23
.right{height:500px;background:green;float:right;margin-left:710px;}中?margin-left:710px; 不妥，left占了左邊700px，只剩260px,你卻要710px，只好另起行，畢竟不是用position 相對位置與絕對位置，這種情況下用%比較好吧。.left的width 80%，.right的 18%……你自己調吧
2016-03-22
<!DOCTYPE HTML>
<html>
? ? <head>
? ? <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
? ? ? ? ?<title>橫向兩列布局</title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? *{margin:0;padding:0;}
? ? ? ? ? ? #wrap{width:960px;text-align:center;background:#ccc;margin:0 auto;}
? ? ? ? ? ? #header{height:30px;background:orange;}
? ? ? ? ? ? #mainBody{height:500px;width:100%;background:yellow;overflow:hidden;}
? ? ? ? ? ? .left{width:700px;height:150px; background:black;float:left;}
? ? ? ? ? ? .right{height:500px;background:green;width:250px;position:relative;top:0;left:710px;}
? ? ? ? ? ? #footer{height:100px;background:purple;bottom:0;}
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <div id="wrap">
? ? ? ? ? ? <div id="header">header</div>
? ? ? ? ? ? <div id="mainBody">
? ? ? ? ? ? ? ? <div class="left">left</div>
? ? ? ? ? ? ? ? <div class="right">right</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div id="footer">footer</div>
? ? ? ? </div>
? ? </body>
</html>
您看看。右邊您用相對定位可以實現
2016-03-22
怎么粘貼不了我的視圖呢，真是無語！