gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:41:55 24 4
gpt4 key购买 nike

我正在尝试使用表格创建水平图像 slider 。我想要显示 5 张图像,无论页面宽度如何(大小正确),但是,滚动不起作用。

我怀疑我对表格使用了错误的 css。

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

这是 fiddle :https://jsfiddle.net/vsadm9qz/

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;
}

最佳答案

添加这些样式:

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

关于html - 尝试使用表格进行水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33615822/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com