布局篇 css

已知高度，实现三栏布局， 左侧宽度300px,右侧高度300px, 中间自适应。

想想有几中方案呢？

1.  浮动布局：

<div class='layout float'>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>center</h1>
    </div>
  </article>
</div>



css样式：

* {
  margin: 0;
  padding: 0;
}
.left-right-center>div {
  height: 200px;
}
.left {
  float: left;
  width: 300px;
  background: red
}

.right {
  float: right;
  background:blue;
  width: 300px;
}

.center {
  background:green;
}

2. 绝对定位

<div class='layout absolute'>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="center">
      <h1>center</h1>
    </div>
    <div class="right"></div>
  </article>
</div>

.layout.absolute .left-center-right1>div {
  height: 200px;
  position: absolute;
}
.layout.absolute .left1 {
  left: 0;
  width: 300px;
  background: red
}

.layout.absolute  .center1 {
  background:green;
  left: 300px;
  right: 300px;
}

.layout.absolute .right1 {
  right: 0;
  background:blue;
  width: 300px;
}

3. flex 布局 

<div class='layout flexbox'>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="center">
      <h1>center</h1>
    </div>
    <div class="right"></div>
  </article>
</div>

.layout.flexbox .left-center-right2>div {
  height: 200px;
}

.layout.flexbox .left-center-right2{
  display: flex;
}
.layout.flexbox .left2 {
  width: 300px;
  background: red
}

.layout.flexbox  .center2 {
  background:green;
  flex: 1;
}

.layout.flexbox .right2 {
  background:blue;
  width: 300px;
}

4.  

<div class='layout table'>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="center">
      <h1>center</h1>
    </div>
    <div class="right"></div>
  </article>
</div>

.layout.table .left-center-right3{
  width: 100%;
  display: table;
  
}

.layout.table .left-center-right3>div {
  height: 200px;
  display: table-cell;
}

.layout.table .left3 {
  width: 300px;
  background: red
}

.layout.table  .center3 {
  background:green;
}

.layout.table .right3 {
  background:blue;
  width: 300px;
}

5.

<div class='layout grid'>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="center">
      <h1>center</h1>
    </div>
    <div class="right"></div>
  </article>
</div>

.layout.grid .left-center-right4{
  width: 100%;
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: 300px auto 300px;
}

.layout.grid .left-center-right4>div {
  height: 200px;
  display: table-cell;
}

.layout.grid .left4 {
 
  background: red
}

.layout.grid  .center4 {
  background:green;
}

.layout.grid .right4 {
  background:blue;
  
}