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

37次阅读

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