您当前位置: 南顺网络>> 官方资讯>> 建站知识

详解左右宽度固定中间自适应html布局解决方案

本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下:

a.使用浮动布局

html结构如下

<div class="box">

    <div class="left">left</div>

    <div class="right">right</div>

    <div class="center">center</div>

</div>  

//此处注意要先渲染左、右浮动的元素才到中间的元素。元素浮动后剩余兄弟块级元素会占满父元素的宽度

<style>

   .box{

        height:200px;

    }   

    .left{

        float:left;

        width:300px;

    }

    .right{

        float:right;

        width:300px;

    }

</style>


html结构如下b.使用固定定位


<div class="box">

    <div class="left">left</div>

    <div class="right">right</div>

     <div class="center">center</div>

</div>

//和浮动布局同理,先渲染左右元素,使其定位在父元素的左右两端,剩余的中间元素占满父元素剩余宽度。

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

将父元素display:table,子元素display:table-cell,会将它变为行内块。c.表格布局

这种布局方式的优点是兼容性好。


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


父元素display:flex子元素会全部并列在一排。d.弹性布局

子元素中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>


父元素display:grid;e.网格布局

grid-templatecolumns:100px auto 100px;

依次为子元素宽100px 第二个自适应 第三个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>



编辑:--龚凯