Question

所以我有一长串<div>标签，我希望并排堆叠而不进行任何垂直滚动。我希望它们像滑块一样水平堆叠。

一个例子是父容器的高度为500px，并且有25个Div是500x500的正方形，它们并排放置并水平滚动。

我试图创建一个位于网页顶部并连续滚动的滑块。

谢谢！

-----编辑8/24/15 @ 2:22 pm -----

到目前为止我所拥有的是：

      <style type="text/css">
      div.table {display:table; width:100%;}
      div.table-row {display:table-row;}
      div.table-cell {display:table-cell; width:500px; height:500px; margin:0px 5px; background:#1996e6; color:#fff;}
      </style>

      <div class="table"> 
        <div class="table-row"> 
          <div class="table-cell">Content</div>
          <div class="table-cell">Content</div>
          <div class="table-cell">Content</div>
          <div class="table-cell">Content</div>
          <div class="table-cell">Content</div>
          <div class="table-cell">Content</div>
          <div class="table-cell">Content</div>
          <div class="table-cell">Content</div>
        </div>
      </div>

Answer 1

这样的东西？

CSS

#container {
    overflow-x: scroll;
    white-space: nowrap;
}

.child {
    display: inline-block;
    width: 500px;
    height: 500px;
    border: 1px solid black;
}

HTML

<div id="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

https://jsfiddle.net/0bgqgkbL/

Answer 2

您可以使用容器的大小，但您只需添加图像（标题可选）http://jsfiddle.net/b7so9870/

$(document).ready(function() {
  $('#rotator > a.arrow.left').click(function(e) {
    e.preventDefault;
    var rotator = $('#rotator .images');
    rotator.children('.imageHolder').first().animate({
      marginLeft: "-=310px"
    }, function() {
      $(this).appendTo(rotator).removeAttr("style");
    });
  });
  $('#rotator > a.arrow.right').click(function(e) {
    e.preventDefault;
    var rotator = $('#rotator .images');
    rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({
      marginLeft: "0"
    });
  });
});

#rotator {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
  position: relative;
}
#rotator .images {
  width: 100%;
  position: relative;
  z-index: -5;
}
#rotator a.arrow {
  width: 18px;
  height: 41px;
  display: block;
  text-indent: -50000em;
  position: absolute;
  top: 220px;
  z-index: 50;
}
#rotator a.arrow.left {
  left: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_left.png");
  background-size: contain;
  background-repeat: no-repeat;
}
#rotator a.arrow.right {
  right: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png");
  background-size: contain;
  background-repeat: no-repeat;
}
#rotator .images .imageHolder {
  width: 500px;
  float: left;
  height: 500px;
  position: relative;
}
#rotator .images .imageHolder span {
  width: 480px;
  margin: 10px;
  color: #FFF;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
}
#rotator .images .imageHolder img {
  width: 500px;
  height: 500px;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: -4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<body>
  <div id="rotator">
    <a href="#" class="arrow left"></a>
    <div class="images">
      <div class="imageHolder">
        <span>Daisies</span>
        <img src="http://www.rachelgallen.com/images/daisies.jpg" alt="" />
      </div>
      <div class="imageHolder">
        <span>Whole choir</span>
        <img src="http://www.musicmatters.ie/images/bara2.jpg" />
      </div>
      <div class="imageHolder">
        <span>Choir</span>
        <img src="http://www.musicmatters.ie/images/bara4.jpg" alt="" />
      </div>

    </div>
    <a href="#" class="arrow right">
      <img src="http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png">
    </a>
  </div>
</body>

水平滚动并排设置高度的<div>标签

2 个答案: