任意大小图片的左右半区布局实例页面

展示

上一张 下一张

说明：图片左右半区分别用半透明暖色和冷色色块表示

代码

• HTML：

  <div class="box">
    <a href="javascript:" class="prev" title="上一张">上一张</a>
    <a href="javascript:" class="next" title="下一张">下一张</a>
    <img src="/images/common/l/1.jpg">
  </div>

• CSS：

  .box {
    display: inline-block;
    position: relative;
  }
  .prev, 
  .next {
    width: 50%; height: 100%;
    position: absolute;
    top: 0;
    opacity: .5;
  }
  .prev {
    left: 0;
    background-color: #cd0000;
  }
  .next {
    right: 0;
    background-color: #34538b;
  }