Question

我写了一点HTML代码，该代码连续显示3个图像，且标题下方。我想使其具有响应性，因此它将在移动设备上将图片作为滑块显示，该滑块会在图像之间自动滚动（如果可能）。我尝试了很多事情，但没有成功，有人知道如何使它响应吗？如果无法使用滑条，那么是否可以同时在移动设备上同时显示所有3张图片？

这是我的代码：

<meta charset="utf-8">
<title></title>
<style>
   div.container {
   display:inline-block;
   padding: 30px;
   }
</style>
<div class="container">
   <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/recycle_-_Kopie_-_Kopie_400x.png?v=1596041138" height="200" width="150">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Monatliches Abonnement</h2>
</div>
<div class="container">
   <img class="middle-img" src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/euro_1_400x.png?v=1596041395" height="200" width="150">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Kauf auf Rechnung</h2>
</div>
<div class="container">
   <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/lkw2_400x.png?v=1596041406" height="200" width="210">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Lieferung vor Ihre Tür</h2>
</div>

Answer 1

您可以尝试附件中的代码，它一定可以解决您的问题，但是如果注释中没有让我知道，我会尽力为您提供帮助。

在答案中，我添加了position: relative;，以使其在分辨率较低的屏幕上自行调整。

我建议您使用视口单位，例如vw表示宽度，而vh表示高度而不是px或%，因为它将帮助您使网页/网站具有响应能力。为了让您更好地理解，我在 padding 中添加了一个示例，将padding: 30px;更改为padding：2.196vw;。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    div.container {
        display:inline-block;
        position: relative;
        padding: 2.196vw;
    }
</style>
</head>
<body>
<div class="container">
   <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/recycle_-_Kopie_-_Kopie_400x.png?v=1596041138" height="200" width="150">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Monatliches Abonnement</h2>
</div>
<div class="container">
   <img class="middle-img" src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/euro_1_400x.png?v=1596041395" height="200" width="150">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Kauf auf Rechnung</h2>
</div>
<div class="container">
   <img src="https://cdn.shopify.com/s/files/1/0431/9559/6957/files/lkw2_400x.png?v=1596041406" height="200" width="210">
   <h2 class="SectionHeader__Heading Heading u-h1" data-theme-editor-setting="section.1595944684240.title/escape">Lieferung vor Ihre Tür</h2>
</div>
</body>
</html>

Answer 2

在三个容器之外添加一个类别为“ images-wrapper”的包装器div

如下修改您的CSS

.images-wrapper {
  display: block;
  white-space: nowrap;
}
.container {
  display: inline-block;
  padding: 30px;
  overflow-x: scroll;
}

HTML内联块容器->响应滑块

2 个答案: