布局

两栏布局

<!-- log -->
<style>
  .two-side {
    height: 300px;
    position: relative;
  }

  .two-side .left {
    position: absolute;
    top: 0;
    height: 300px;
     100px;
    background-color: red;
  }

  .two-side .right {
    margin-left: 100px;
    opacity: 0.5;
    height: 100%;
    max- 750;
    background-color: green;
  }
</style>
<div class="two-side">
  <div class="left"></div>
  <div class="right"></div>
</div>

注意：位置可颠倒。

逆向双飞翼

<!-- log -->
<section id="fly">
  <div class="wrapper">
    <div class="content"></div>
  </div>
</section>
<style>
  #fly .wrapper {
    height: 30px;
    background-color: grey;
  }
  #fly .content {
     500px;
    height: 30px;
    background-color: red;
    margin: 0 auto;
  }
</style>