三栏布局（两边固定，中间自适应），为什么我两种方法一样，结果也不一样？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   <title></title>
   <style type="text/css">

   #left {
   float: left;
   width: 220px;
   height: 200px;
   background: blue;
   }

   #right{
   float: right;
   width: 220px;
   height: 200px;
   background: blue;
   }

   #main {
   height: 200px;
   background:red;
   margin: 0 230px;
   }
   </style>
</head>
<body>
    <div id="left">left </div>
   <div id="right">right</div>
   <div id="main">mian</div>

</body>
</html>

咩咩咩3124927

浏览 1519回答 4

4回答

一杯2块的奶茶

不一样，html代码不同，中间的要放到最后

吃不胖很惆怅

可以学习下圣杯布局

咩咩咩3124927

麻烦各位看一下，第一种方法可以实现，第二种不行。但是这两个代码都是一样的啊？

咩咩咩3124927

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .left{ width: 220px; height: 200px; float: left; background: orange; } .right{ width: 220px; height: 200px; float: right; background: green; } .center{ height: 200px; background:red; margin: 0 230px; } </style> </head> <body> <div class="left"></div> <div class="center"></div> <div class="right"></div> </body> </html>

随时随地看视频慕课网APP