布局两列div等高方法

时间：2023-03-09 02:41:12
布局两列div等高方法

一、左右布局，左侧div绝对定位，外div相对定位

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style type="text/css">

 *{margin:0;padding: 0;}

     .container{

         width: 1000px;

         margin:0 auto;

         background: #c6c;

         position: relative;

     }

     .side{

         width: 200px;

         background: #c66;

         height: 100%;

         position: absolute;

         top:0;

         left: 0;

     }

     .content p{padding-left: 210px;color: #fff;}

 </style>

 <body>

     <div class="container">

         <div class="side">side</div>

         <div class="content">

             <p>驿外断桥边，</p>

             <p>寂寞开无主。</p>

             <p>已是黄昏独自愁，</p>

             <p>更著风和雨。</p>

             <p>无意苦争春，</p>

             <p>一任群芳妒。</p>

             <p>零落成泥碾作尘，</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

         </div>

     </div>

 </body>

 </html>

2.左侧div左浮动，右div加背景

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style type="text/css">

 *{margin:0;padding: 0;}

     .container{

         width: 1000px;

         margin:0 auto;

         background: #c6c;

         overflow: hidden;

     }

     .side{

         width: 200px;

         float: left;

     }

     .content{background: #6c6;margin-left: 200px;}

     .content p{color: #fff;padding-left: 10px;}

 </style>

 <body>

     <div class="container">

         <div class="side">side</div>

         <div class="content">

             <p>驿外断桥边，</p>

             <p>寂寞开无主。</p>

             <p>已是黄昏独自愁，</p>

             <p>更著风和雨。</p>

             <p>无意苦争春，</p>

             <p>一任群芳妒。</p>

             <p>零落成泥碾作尘，</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

         </div>

     </div>

 </body>

 </html>

3.通过padding正值，margin负值实现，参考别人的代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style type="text/css">

 *{margin:0;padding: 0;}

     .container{

         width: 1000px;

         margin:0 auto;

         overflow: hidden;

     }

     .side{

         width: 200px;

         background: #c66;

         float: left;

         padding-bottom:2000px;

         margin-bottom: -2000px;

     }

     .content{

         margin-left: 200px;

         background:#c6c;

         padding-bottom:2000px;

         margin-bottom: -2000px;

     }

     .content p{color: #fff;padding-left: 10px;}

 </style>

 <body>

     <div class="container">

         <div class="side">side</div>

         <div class="content">

             <p>驿外断桥边，</p>

             <p>寂寞开无主。</p>

             <p>已是黄昏独自愁，</p>

             <p>更著风和雨。</p>

             <p>无意苦争春，</p>

             <p>一任群芳妒。</p>

             <p>零落成泥碾作尘，</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

         </div>

     </div>

 </body>

 </html>

4.通过左浮动和margin-left负值来实现，参考别人的代码

 <!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>

 <title>CSS特效-两列等高布局效果</title>

 <meta http-equiv="content-type" content="text/html;charset=utf-8">

 <style type="text/css">

 *{margin:0;padding:0}

 html{overflow-y:scroll}

 body{font-size:12px;background:#fff;color:#333}

 ul,ol{list-style:none}

 a{text-decoration:none;color:#f30}

 img{border:none}

 .clearfix{zoom:1}

 .clearfix:after{content:"";display:block;height:0;line-height:0;font-size:0;visibility:hidden;clear:both}

 .ct_wrap{width:950px;margin:0 auto;zoom:1;background:#e0e0e0;}

 .content{margin-left:150px;background: #c66;}

 .main_col{float:left;width:100%;word-wrap:break-word}

 .side_col{float:left;width:150px;margin-left:-950px;position:relative;word-wrap:break-word}

 </style>

 </head>

 <body>

 <div class="ct_wrap">

     <div class="content clearfix">

         <div class="main_col">

             <p>驿外断桥边，</p>

             <p>寂寞开无主。</p>

             <p>已是黄昏独自愁，</p>

             <p>更著风和雨。</p>

             <p>无意苦争春，</p>

             <p>一任群芳妒。</p>

             <p>零落成泥碾作尘，</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

             <p>只有香如故。</p>

         </div>

         <div class="side_col">我可以有背景色</div>

     </div>

 </div>

 </body>

 </html>

相关文章