Question

我想要一个居中的盒子，盒子两边各有两个图像，重叠。之后，我将使用jquery动画功能移动每个框的顶部图像，远离底部图像。

到目前为止，这是我的代码：

＆＃13;

html,
body,
#wrapper {
  height: 100%;
  min-height: 100%;
}
#wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}
#center {
  width: 800px;
  border: 1px solid black;
  text-align: center;
  position: relative;
}
img {
  width: 100%;
  height: auto;
  float: left;
}
#left {
  //border:1px solid red;
  width: 400px;
  float: left;
  //position:absolute;

}
#right {
  //border: 1px solid green;
  width: 400px;
  float: right;
  //position:absolute;

}
#top {
  z-index: 1;
}
#under {
  z-index: -1;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style1.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</head>

<body>
  <div id="wrapper">
    <div id="center">
      <div id="left">
        <img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top">
        <img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
      </div>
      <div id="right">
        <!--<img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under">-->
        <img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top">
      </div>
    </div>
  </div>
</body>

<footer>
</footer>

</html>

＆＃13;

我已设法将此框居中并为每一面（左，右）添加一张图片，但是当我想在两边添加另一张图片时，它有z-index：-1它会分成新行..

显示问题的小提琴：https://jsfiddle.net/bjgydLvo/

Answer 1

你需要给你的第二张图像一个类并将它放在绝对位置。

#left {
    width: 400px;
    float: left;
    position: relative;
}

确保您的左侧元素相对位置

@foreach (var item in Model.AvailableRooms)
{
    <li class="room-item clearfix">
        <h5>@item.Name</h5>
        <div class="room-list-left">
            <img src="@item.Image" alt="" />
        </div>
        <div class="room-list-right">
            <div class="room-meta">
                <ul>
                    <li><span>Occupancy:</span> @item.Adults Adults @item.Childs Children</li>
                    @if (item.SmokingRoom)
                    {
                        <li><span>Smoking Allowed:</span> Yes</li>
                    }
                    else
                    {
                        <li><span>Smoking Allowed:</span> No</li>
                    }
                </ul>
            </div>
            <div class="room-price">
                <p class="price">From: <span>$@item.Price</span> / Night</p>
            </div>
            <div class="clearboth"></div>
            @using (Html.BeginForm("chooseroom", "booking", FormMethod.Post))
            {
                <input class="button2" type="submit" value="Select Room" />
            }

删除#under

工作示例

https://jsfiddle.net/46pk1vdf/4/

Answer 2

z-index在没有指定位置的情况下不会工作..

更新了小提琴：https://jsfiddle.net/bjgydLvo/2/

#under{
   z-index:-1;
   float: none;
   height: auto;
   left: 0;
   position: absolute;
   width: 400px;
   z-index: -1;
}

将图像定位在两个相邻div上的图像上

2 个答案: