双栏布局

最新推荐文章于 2024-02-01 16:12:44 发布

weixin_30258027

最新推荐文章于 2024-02-01 16:12:44 发布

阅读量371

点赞数 1

原文链接：http://www.cnblogs.com/xxcnhj/p/11171991.html

版权

左边固定,右边自适应

1.左边浮动,右边自适应

//html
<div class="content">
            <div class="left"></div>
            <div class="right"></div>
            
         </div>


//css

.content{overflow:hidden;height:200px;}
.left{
  display:inline-block;
  float:left;
  width:200px;
  height:200px;
  background:red;
}

.right{
  display:block;
  height:200px;
  background:yellow;
}

2.利用定位

//html
<div class="content">
       <div class="left"></div>
       <div class="right"></div>
    </div>

//css
 .content{
            position: relative;
        }

        .left{
           display: inline-block;
           height: 200px; 
           width: 200px;
           position: absolue;
           top: 0;
           float: left;
           background: red;
        }   

        .right{
           display: block; 
           height: 200px;
           background: yellow;
           margin-left: 200px; 
        }

3.负margin方法

//html
<div class="content">
        <div class="right"></div>
    </div>
    <div class="left"></div>

//css
.left{
         display: inline-block;  
         width: 200px;
         height: 200px;
         margin-left: -100%;
         background: red;
         float: left;
       }   
    
      .content{
          width: 100%;
          float: left;
      }
 
      .right{
          display: block;
         background: yellow;
         margin-left: 200px;
         height: 200px;
      }

4.利用flex布局;

//html
<div class="content">
         <div class="left"></div>
         <div class="right"></div>
     </div>

//css
.content{
           display: flex;
       }
       .left{
           width: 200px;
           height: 200px;
           display: inline-block;
           background: red;
       }
       .right{
           flex: 1;
           background: yellow;
       }

转载于:https://www.cnblogs.com/xxcnhj/p/11171991.html