Question

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

我希望当屏幕调整整个相应尺寸的图像大小时，

    <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 **/
}

Answer 2

您可以通过多种方式实现此目的，您可以按百分比设置图像的宽度和高度。这样，浏览器大小的任何调整都会自动影响图像。尝试将代码添加到您的CSS

img.pic1 {
width:30%
float:left;
}


img.pic2 {
width:30%
float:right;
}

.clear {
clear:both;

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

2 个答案: