html - 包含 3 个相交图像的 div 的响应式布局

Question

我正在尝试让 Content div 响应，div由左边的两个图像和右边的另一个图像组成， 并且在中间有一个图像，中间图像的一部分将在左侧，另一部分将在右侧图像中，

我希望当屏幕调整整个这些图像的大小时相应地调整大小，

这是一个链接， http://syrdoccam.com/oleaotel/

    <div id="wrapper">
        <div class="header">
            <div class="topHead">
                <div class="container clearfix">

            </div>
        </div>
    </div>
    <div class="content">
        <div style="height: 500px;">
            <!--<div id="pic1"> </div>--><img src="img/pic1.png" class="pic1" >
            <div class="reservation"></div>
        <!--<div id="pic2"></div>--><img src="img/pic2.png" class="pic2" >
        </div>
    </div>
    <div class="middle">

    </div>
</div>


.content {
    border-top: 1px solid #EEF0EF;
    box-shadow: 0 -1px 2px #DFE1DF;

    position: relative;
    z-index: 95;
}

.reservation {
    background: url("../img/reservation.png") no-repeat scroll;
    float: left;
    height: 74%;
    left: 33%;
    position: absolute;
    top: 26%;
    width: 52%;
    background-size: 100%;
}

我能做什么？

Answer 1

这样做。

<div class="content">
  <img class="left">
  <div class="detail"></div>
  <img class="right">
</div>

风格

.content {
  position:relative;
}

.content .left, .content .right, .content .detail {
  position:absolute;

  top:0;
  z-index:1;
}

.content .left {
  left:0;
}

.content .right {
  right:0;
}

/** For Click-able dive**/
.content .detail {
  z-index:2;
  left:25%; /** Putt how much u want **/
}