這答案真的對么？
完全ctrl+c ctrl+v不會了怎么辦里的代碼，在chrome里，完全不一樣啊
<!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{height:100px;?background:#ccc}
.left{?width:200px;?height:500px;?background:blue;?}
.right{?margin-left:210px;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>
2016-03-17
首先看這個要求，上面top，中間main顏色紅色，left和right本來是在紅色的main下面的，所以需要設置浮動和絕對定位，把left和right浮動到上面，然后下面有個foot，難點就在不改變
right和left的順序的前提下，實現如圖所示的布局，所以單一的float已經不行了，需要用到絕對定位。
完整代碼如下所示，你先理解理解，當然我的方法不是唯一的，也有其他方法能達到同樣效果。
<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{background-color:#ccc;?height:100px;} .main{background-color:red;?height:500px;?position:relative;}//設置left的父級為相對定位，使left可以絕對定位到right的左面// .left{background-color:blue;?float:left;?width:200px;?height:500px;?position:absolute;?top:0px;} .right{background-color:green;?height:500px;?margin:0?0?0?210px;?}//利用外邊距，使right移動到main的右面// .foot{background:#f77;?height:50px;} </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>2016-03-16
代碼貼出來啊
2016-03-16
我的正常呢，仔細看下。也有可能是瀏覽器兼容性的問題