三栏布局，中间自适应要怎么调呢？代码如下，总算憋出来了，但是好复杂

#left{
               float:left;
               padding:20px;
               border:2px solid #999;
               margin:0px;
               position:absolute;
                width:100%;
               height:98%;
               background:#eee;
               }
               .right{
                   right:20px;
                   position:absolute;
                    float:right;
                   border:2px solid #999;
                   padding:20px;
                   width:120px;

                   background:white;
                   }
               .div1{
               border:2px solid #999;
               float:left;
               position:relative;
               padding:20px;
               left:0;
               width:200px;
               height:80px;
               background:white;
               }
               .div2{
               left:0;
               position:relative;
               border:2px solid #999;
               width:90px;
               height:60px;
               padding-top:20px;
               float:left;
               background:#eee;
           }
           h4{

               float:right;
           }
           .main{
               padding:20px;
               border:2px solid #999;
               height:80%;
               text-align:center;
               background:white;
               margin:0 210px 0 270px;
               position:absolute;
           }
           .logo1{

               text-align:centenr;
               border:2px solid #999;
               padding:20px;
               margin:10px;
               background:#eee;
               width:60px;

           }
           .logo2{
               border:2px solid #999;
               padding:20px;
               margin:10px;
               background:#eee;
               text-align:centenr;
               width:60px;
           }
           .logo3{
               border:2px solid #999;
               padding:20px;
               margin:10px;
               background:#eee;
               text-align:centenr;
               width:60px;
           }
           .logo4{
               border:2px solid #999;
               padding:20px;
               margin:10px;
               background:#eee;
               text-align:centenr;
               width:60px;
           }
           </style>

   </head>
   <body>
       <div id="left">

           <div class="div1"><h4>团队名称</h4>
           <div class="div2"><center>团队LOGO</br>80x80</center></div></div>

       <div class="main">关于你们团队的介绍</br>
           我们是一组由大学生组成的学习团队，都是JS入门级别的菜鸟。</div>
       <div class="right">
           <div class="logo1">个人LOGO</br>80x80</div>
           <div class="logo2">个人LOGO</br>80x80</div>
           <div class="logo3">个人LOGO</br>80x80</div>
           <div class="logo4">个人LOGO</br>80x80</div>
       </div>
       </div>
    </body>
</html>

慕粉151200503

浏览 1217回答 1

1回答

候补程序员

#left { /* float: left; */ padding: 20px; border: 2px solid #999; margin: 0px; /* position: absolute; */ /* width: 100%; */ height: 98%; background: #eee; } .main { /* padding: 20px; */ border: 2px solid #999; height: 80%; text-align: center; background: white; margin: 0 200px 0 300px; /* position: absolute; */ } .right { right: 20px; position: absolute; float: right; border: 2px solid #999; padding: 20px; width: 120px; top: 20px; background: white; }你的主要问题是乱用定位，把这几个类换掉就可以了

随时随地看视频慕课网APP