Question

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

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>

Answer 1

如果一个元素有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>

:: UPDATE ::

工作jsfiddle here

Answer 2

问题出在你的.media元素中，它被设置为100％所以overflow-x将如何工作。检查这个fiddle。根据这个，您要滚动的内容是另一个具有不同风格的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;
    }

Answer 3

这是Fiddle

你的.image类中的

设置宽度（以像素为单位）

.image
{
   width: 400px;
   ..... 
}

图库水平滚动与Div

3 个答案: