javascript - 操纵 div 内容的形式

Question

下面的代码是一个 slider ，它在上一个和下一个分隔符之间进行操作。每个分隔线代表一组十张图像，如两条平行垂直线所示。我正在尝试使每个分隔线成为 2 条平行的水平线(每条线上有 5 个图像)，但是它变得困惑并且 2 个分隔线正在连接。有什么帮助吗？

HTML:

<div id="wrapper">
    <div id="nav">
        <button id="prev" disabled>&lt;&lt;&lt;</button>
        <button id="next">&gt;&gt;&gt;</button>
    </div>
    <div id="mask">
        <div id="item1" class="item">
            <a name="item1"></a>
            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
        <div id="item2" class="item">
            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
    </div>
</div>

CSS:

#wrapper {
  width: 500px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ccc;
  overflow: hidden;
}
#nav button {
  position: absolute;
  top: 100px;
}
#prev {
  left: 40px;
}
#next {
  right: 40px;
}
#mask {
  width: 5000px;
  height: 100%;
  background-color: #eee;
}    
.item {
    width: 500px;
    height: 100%;
    float: left;
    background-color: #ddd;
}
.content img {
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 4%;
    margin-bottom: 6%;
}
.content {
    width: 45%;
    height: 220px;
    top: 20%;
    margin: auto;
    background-color: white;
    position: relative;
}       
.content a {
    position: relative;
    top: -17px;
    left: 170px;
}
.selected {
    background: #fff;
    font-weight: 700;
}
.clear {
    clear:both;
}

JQUERY:

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
src="js/jquery.scrollTo.js"

$(document).ready(function () {
  function shift(direction) {
    var 
      $mask = $('#mask'),  
      items = $('.item').size(),
      currentItem = $mask.data('currentItem'),
      newItem;

    if (currentItem == undefined) {
      currentItem = 0;
    }

    newItem = currentItem + direction;
    $mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});

    if (newItem == 0) {
      $("#prev").prop('disabled', true);
    } else {
      $("#prev").prop('disabled', false);
    }    
    if (newItem == items - 1) {
      $("#next").prop('disabled', true);
    } else {
      $("#next").prop('disabled', false);
    }
  }

  $('#prev').click(function() {
    return shift(-1);
  });
  $('#next').click(function() {
    return shift(1);
  });
});

JSFIDDLE:http://jsfiddle.net/2ghovmww/

Answer 1

正如我所看到的，您可以为每个水平 block 使用 display:inline 实现您想要的效果，但是当您实现它时，容器的宽度小于中的五个元素的宽度一排，所以他们不能显示。如果您使用 overflow:hidden ，您将有两行，但超过容器宽度的元素将被隐藏。所以首先你必须调整容器及其父元素的宽度。