Question

我正在尝试使用表格创建水平图像滑块。我想要显示5个图像，无论页面宽度（它的大小正确），但是，滚动不起作用。

我怀疑我在桌子上使用了错误的CSS。

如果有更好的解决方法，我不需要使用该表。

HTML

 <div class="galleryWrap">
    <table border="0">
        <tbody>
            <tr>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="1" src="http://placehold.it/300x300?text=IMG+1" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="2" src="http://placehold.it/300x300?text=IMG+2" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="3" src="http://placehold.it/300x300?text=IMG+3" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="4" src="http://placehold.it/300x300?text=IMG+4" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="5" src="http://placehold.it/300x300?text=IMG+5" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="6" src="http://placehold.it/300x300?text=IMG+6" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="7" src="http://placehold.it/300x300?text=IMG+7" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="8" src="http://placehold.it/300x300?text=IMG+8" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="9" src="http://placehold.it/300x300?text=IMG+9" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="10" src="http://placehold.it/300x300?text=IMG+10" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="11" src="http://placehold.it/300x300?text=IMG+11" style="max-height: 390px;" />
                    </div>
                </td>
                <td>
                    <div class="horizontalGalleryImageHolder">
                        <img id="12" src="http://placehold.it/300x300?text=IMG+12" style="max-height: 390px;" />
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body {
    margin: 0;
}
table {
    border-collapse: collapse;
}
td {
    width: 20%;
    padding: 0px;
}
img {
    width: 100%
}
.galleryWrap {
    width: 100%;
    overflow-x: scroll;
}

Answer 1

添加以下样式：

td {
  display: inline-block;
}

table {
  white-space: nowrap;   //prevent cells from wrapping
}

Fiddle 1

您还可以通过删除所有表格HTML代码并使用以下样式来简化：

.galleryWrap {
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
}

.horizontalGalleryImageHolder {
  width: 20%;
  display: inline-block;
}

Fiddle 2

Answer 2

你走了！

https://jsfiddle.net/vsadm9qz/2/

滑块的标准过程是内联阻塞图像容器并将它们包装在两个div中。第一个有overflow-x: scroll，第二个宽到足以容纳所有图像。

像这样：

<div class="scroll">
   <div class="galleryWrap">
       <div class="image"><img></div>

和

.image{
   display: inline-block;
    width: 8% // 100 / number of images
}

img {
    width: 100%
}

.galleryWrap {
   width: 1200%; // 100 * number of images
}

.scroll {
    overflow-x: scroll;
}

尝试使用表格进行水平滚动

2 个答案: