0

我目前正在尝试创建一个图像库，用户可以在其中水平滚动浏览每个页面的图像（左右滑动，因为这适用于手机和平板电脑）。我无法弄清楚我哪里出错了，有人知道吗？

我的代码位于 http://jsfiddle.net/8tDYk/

CSS：

.media{
    width: 100%; 
    height: 288px; 
    float: left;
    display: inline-block;
    overflow-x: auto;
    -ms-overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-y: hidden;
    white-space: nowrap;
}

.image{
    float: left;
    height: 240px;
    width: 75%;
    margin: 3.2%;
    text-align:center;
    border: 7px solid white;
}

HTML：

<div class="media">
    <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a>
     </div>
    <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a>
     </div>
    <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a>
     </div>    
</div>
4

3 回答 3

2

如果一个元素有float:left;，它将自己定位在前一个元素的右侧（如果有空格），否则，该元素将自己定位在它下方的行上。

overflow-y: visible;设置时可以看到.media

防止这种情况发生的一种方法是制作一个额外的内部 div，您可以在其中明确设置宽度（Javascript 是一个很大的帮助），如下所示：

<div class="media">
  <div class="imageContainer">
    <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a>
     </div>
     <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a>
      </div>
      <div class="image">
          <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""></a>
       </div>
    </div>
</div>

然后，您可以使用 jquery 为 imageContainer 设置宽度，如下所示：

<script type="text/javascript">
   var imageWidth = 240;
   $(document.ready()
   {
     $(".imageContainer").width($(".image").length*imageWidth);
   });
</script>

：：更新：：

在这里工作 jsfiddle

于 2013-08-23T10:32:46.227 回答
1

问题出在您的 .media 元素中，它设置为 100%，因此溢出 x 将如何工作。检查这个小提琴。据此，您要滚动的内容位于另一个具有不同样式的 div 中。标记是

    <div class='scroll'>
<div class="media">
    <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/></a>
     </div>
    <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/></a>
     </div>
    <div class="image">
        <a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/></a>
     </div>    
    </div></div>

CSS是

.media
{
width: 100%; 
height: 288px; 
float: left;
display: inline-block;
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
}

    .image
    {
    float: left;
    height: 240px;
    width: 75%;
    margin: 3.2%;
    text-align:center;
    border: 7px solid white;
    }
于 2013-08-23T10:38:07.410 回答
0

这是小提琴

在您的 .image 类中将宽度（以像素为单位）设置为

.image
{
   width: 400px;
   ..... 
}
于 2013-08-23T10:28:24.863 回答