关于css:高度已知三栏布局左右宽度各300px中间自适应

35次阅读

共计 1737 个字符,预计需要花费 5 分钟才能阅读完成。

// 第一种办法:浮动(块级格局独占一行)
<div class="wrapper_float">
    <div class="float_left">1</div>
    <div class="float_center">2</div> 
    <div class="float_right">3</div>
</div>
<style>
    .wrapper_float{
      height:100px;
      width:100%;
    }
    .wrapper_float .float_left{
      width:300px;
      float:left;
      background: red;
      height:100%;
    }
    .wrapper_float .float_center{
      width:300px;
      float:right;
      background: blue;
      height:100%;
    }
    .wrapper_float .float_right{
      background: beige;
      height:100%;
    }
 </style>
// 第二种办法:相对定位
<div class="wrapper_absolute">
    <div class="absolute_left">1</div>
    <div class="absolute_center">2</div>
    <div class="absolute_right">3</div>
</div>
<style>
    .wrapper_absolute{
      height:100px;
      position:relative;
    }
    .absolute_left{
      position:absolute;
      left:0;
      width:300px;
    }
    .absolute_right{
      position:absolute;
      right:0;
      width:300px;
    }
    .absolute_center{
      position:absolute;
      left:300px;
      right:300px;
    }
</style>
// 第三种办法:flex 布局
<div class="wrapper_flex">
    <div class="flex_left">1</div>
    <div class="flex_center">2</div>
    <div class="flex_right">3</div>
</div>
<style>
    .wrapper_flex{
      display:flex;
      height:100px;
    }
    .flex_left, .flex_right{width:300px}
    .flex_center{flex:1}
 </style>
// 第四种办法:table
<div class="wrapper_table">
    <div class="table_left">1</div>
    <div class="table_center">2</div>
    <div class="table_right">3</div>
</div>
<style>
    .wrapper_table{
      display: table;
      height:100px;
      width:100%;
    }
    .table_left,.table_right{
      width:300px;
      display: table-cell;
      background-color: aliceblue;
    }
    .table_center{display: table-cell;}
</style>
// 第五种办法:grid
<div class="wrapper_grid">
    <div class="grid_left">1</div>
    <div class="grid_center">2</div>
    <div class="grid_right">3</div>
</div>
<style>
    .wrapper_grid{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
    }
</style>

优缺点:
浮动:兼容性好,易脱离文本流
相对定位:快捷,有效性差
flex 布局:解决上述两个问题
table 表格布局:兼容性好,单个模块高度增高的时候,其余模块的高度也随着增高
网格布局:缩小代码量

高度不固定时,flex 布局,table 布局仍然能够实现

正文完
 0