固宽&变宽(两列三栏)

固宽&变宽(两列三栏)

两列自适应布局

两列自适应布局是指一列固定宽度，另一列撑满剩余宽度的布局方式

常见HTML结构如下：

<div class="main">
    <div class="left">
    左边内容  
    </div>
    <div class="right">
        右边内容   
    </div>
</div>

方案1：浮动

/*父元素要清除浮动*/
.main{
  height: 300px;
}
.main .left{
  width:300px;
  float:left;
  height:300px;
  background: #ff0097
}
.main .right{
   /*margin-left: 300px;*/
  height:300px;
  background: #4eb3b9
}

[demo]

方案2：定位

.main{
  height: 300px;
  position: relative;
}
.main .left{
  position:absolute;
  top:0;
  left:0;
  width:300px;
  height:300px;
  background: #ff0097
}
.main .right{
  position:absolute;
  top:0;
  left:302px;/*同时设置左和右，得到的宽度即为100%-left-right*/
  right:0;
  height:300px;
  background: #4eb3b9
}

[demo]

方案3：padding+定位

.main{
  height: 300px;
  position: relative;
  padding-left:300px;
  }
.main .left{
  position:absolute;
  top:0;
  left:0;
  width:300px;
  height:300px;
  background: #ff0097
  }
.main .right{
  height:100%;
  background: #4eb3b9
}

[demo]

方案4：padding+浮动+负边距

.main{
  height: 300px;
  position: relative;
  padding-left:300px;
}
.main .left{
  float: left;
  margin-left: -300px;
  width:300px;
  height:300px;
  background: #ff0097
}
.main .right{
  height:100%;
  background: #4eb3b9
}

[demo]

方案5：Flex布局

.main{
    height: 300px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.main .left{
    background: #ff0097;
    flex-basis: 300px;
    height:100%;
}
.main .right{
    flex-grow: 1;
    height:100%;
    background: #4eb3b9;
}

[demo]

优化

• 以上的结构，是网页常见的：侧边栏+主体内容的布局方式
• 从优化的角度说，会希望是主体内容优先加载，这种情况应该如何浮动布局？
• 主体内容优先加载，所以主题内容(这里是right)在DOM结构上优先，以便先行渲染。
• Flex兼容性问题，定位使left模块脱离了文档流，浮动

优化后的HTML结构如下

<div class="main">  
  <div class="right">
  右边内容
</div>
  <div class="left">
    左边内容
  </div>
</div>

优化后样式如下：

.main{
    height: 300px;
  /*position: relative;*/
    padding-left: 300px;
}
.main .left{
    float: left;
    margin-left: -300px;
    width:300px;
    height:300px;
    background: #ff0097
}
.main .right{
    float: right;
    width: 100%;
    height: 300px;
    background: #4eb3b9
}

[demo]

三栏自适应布局

特征：中间列自适应宽度，旁边两侧固定宽度

常见HTML结构如下：

<div class="main">
    <div class="left">left</div>
    <div class="content">
        主体内容
    </div>
    <div class="right">right</div>
</div>

• 两栏自适应的布局方式可应用到该常见的HTML结构上。

优化

优化后的HTML结构如下：

<div class="main">
    <div class="center">
        主体内容
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

对应的CSS样式如下：

body{
    /*left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为100+400+100=600px：*/
    min-width: 600px;
}
.main{
    height: 300px;
    position: relative;
    padding:0 400px 0 100px;

}
.left,.right, .center{
    float: left;
    height:100%;
}
.main .left{
    width: 100px;
    /*根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。*/
    margin-left: -100%;
    /*将left的位置在原有位置基础上左移100px*/
    position: relative;
    left: -100px;
    background: #ff0097;
}
.main .right{
    width:400px;
    margin-right: -400px;
    background: #4eb3b9;
}
.center{
    width:100%;
    background: #7cb91a;
}

参考：https://blog.csdn.net/weixin_43638968/article/details/107919835

[demo]

github

总结

• pc端推荐浮动布局，移动端页面使用Flex布局

• 百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）