css实现等高布局 两栏自适应布局 三栏自适应布局(2/3)

本篇文章主要介绍了"css实现等高布局 两栏自适应布局 三栏自适应布局"，主要涉及到CSS,布局方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 总结一下css常用的布局样式等高布局在这里实现三种等高布局方法 * padding补值法该方法是通过负margin，同时将padding的值设为正的margi...

.container{
        width:800px;
        background-color: #09EE4E;

    }
    .item1,.item2{
        display: table-cell;
        width:300px;
        background-color: #42EBA2;
    }

值得注意的是 这里子div设置margin没有作用

两栏自适应布局

• 浮动布局
  采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

  <>
  .item1{
     float:left;
     width:300px;
     height:400px;
     background-color: #41D844;
  }
  .item2{
     margin-left: 310px;
     height:400px;
     background-color: #41D844;
  }
  

• 绝对定位实现

采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果

.item1{
    position:absolute;
    margin-right: -100%;
    width:300px;
    height:400px;
    background-color: #41D844;
}
.item2{
    margin-left: 310px;
    height:400px;
    background-color: #41D844;
    }

三栏自适应布局

float+负margin实现方法

相关css代码如下

.container{
    width:100%;
    height:300px;
    float:left;

}
.center{
    background-color: #16EA74;
    /*width:500px;*/
    height:300px;
    margin-left:250px;
    margin-right:250px;
}
.left{
    background-color: #16EA74;
    float:left;
    width:200px;
    height:300px;
    margin-left:-100%;
}
.right{
    background-color: #16EA74;
    width:200px;
    height:300px;
    float:left;
    margin-left:-200px;
}

• float方法实现三栏自适应布局

  .center{
      margin-left:300px;
      margin-right:300px;
      height:300px;
      background-color: #23ED8D;
  }
  .left{
      float:left;
      height:300px;
      width:200px;
      background-color: #23ED8D;
  }
  .right{
      float:right;
      height:300px;
      width:200px;
      background-color: #23ED8D;
  }