详解上下宽度固定不动正中间自融入html合理布局

本文详细介绍了详解上下宽度固定不动正中间自融入html合理布局处理计划方案,共享给大伙儿,实际以下:

a.应用波动合理布局

html构造以下

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>   
//此处留意要先3D渲染左、右波动的元素才到正中间的元素。元素波动后剩下弟兄块级元素会占满父元素的宽度
<style>
   .box{
        height:200px;
    }    
    .left{
        float:left;
        width:300px;
    }
    .right{
        float:right;
        width:300px;
    }
</style>

b.应用固定不动精准定位

html构造以下

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
     <div class="center">center</div>
</div> 
//和波动合理布局同理,先3D渲染上下元素,使其精准定位在父元素的上下两边,剩下的正中间元素占满父元素剩下宽度。
<style>
    .box{
        position: relative;
      }
      .left{
        position: absolute;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        position: absolute;
        right: 0;
      }
      .center{
        margin: 0 100px;
        background: red;
      }
</style>

c.报表合理布局

将父元素display:table,子元素display:table-cell,会将它变成行内块。

这类合理布局方法的优势是适配性好。

<div class="box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
<style>
    .box{
        display: table;
        width: 100%;
      }
      .left{
        display: table-cell;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        display: table-cell;
      }
      .center{
        width: 100%;
        background: red;
      }
</style>

d.延展性合理布局

父元素display:flex子元素会所有并列在1排。

子元素中flex:n的宽度会将父元素的宽度/n

如flex:1,宽度就等于父元素高宽比。

延展性合理布局的缺陷是适配性不高,现阶段IE访问器没法应用延展性合理布局

<div class="box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
<style>
    .box{
        display: flex;
        width: 100%;
      }
      .left{
      
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
      }
      .center{
        flex:1;
      }
</style>

e.网格合理布局

父元素display:grid;

grid-templatecolumns:100px auto 100px;

先后为第1个子元素宽100px 第2个自融入 第3个100px;

网格合理布局的优势是极其简单,立即根据父元素款式决策,缺陷是适配性不高。

<div class="box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
<style>
  .box{
        display: grid;
        grid-template-columns: 100px auto 100px;
        width: 100%;
      }
</style>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。