Question

我想制作一个带有缩略图图像的图像滑块可供选择，我的想法是水平对齐所有图像并隐藏覆盖而不是使用javascript我只会更改左侧位置以显示所需缩略图，但我无法做到弄清楚如何css图像以hrizontally对齐并隐藏超出thumnails容器的部分，我使用spectre css框架，我的HTML看起来像这样

＆＃13;

.img-list {
  margin-bottom: 20px;
  height: 100px;
  width: 100%;
  overflow-x: hidden;
}

@media (max-width: 600px) {
  .img-list {
    height: 50px;
  }
}

.img-container {
  height: 100%;
  position: relative;
  overflow: visible;
}

.img-container img {
  height: 100%;
  display: inline-block;
  position: relative;
}

.img-main {
  width: 100%;
}

.img-main img {
  width: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

<div class="container">
      <div class="columns">
        <div class="column col-md-12">
          <div class="img-main">
            <img src="https://preview.ibb.co/gxVppG/img1.jpg">
          </div>
          <div class="img-list ">
            <div class="img-container">
                <img src="https://preview.ibb.co/gxVppG/img1.jpg">
                <img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
                <img src="https://preview.ibb.co/iQsPOb/img3.jpg">
                <img src="https://preview.ibb.co/gFFdib/img4.jpg">
                <img src="https://preview.ibb.co/hS5ppG/img5.jpg">
                <img src="https://preview.ibb.co/goKtGw/img6.jpg">
                <img src="https://preview.ibb.co/bSWjOb/img7.jpg">
                <img src="https://preview.ibb.co/i2o9pG/img8.jpg">
            </div>
          </div>
        </div>
        <div class="column col-md-12">
          <h1>Peugeaut 206</h1>
          <input type="number" onchange="showImage(this)" value="1">
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam culpa sint recusandae architecto odit tenetur
            fugit rerum soluta quidem velit. Eos provident nemo dolores vitae pariatur perspiciatis delectus ex dignissimos!
            Quibusdam architecto natus nam ullam cupiditate deserunt voluptatem nulla inventore nesciunt error recusandae
            quod ab, harum temporibus laboriosam numquam facilis beatae. Numquam odit dolorem quasi rerum aut cupiditate
            distinctio ad! Assumenda aut, repellat nihil, fugit doloremque doloribus harum possimus commodi aliquam recusandae
            reiciendis delectus vel modi quia sapiente sit voluptas deleniti. Repellat magni rerum fuga vitae odio ad
            ullam tempora.</p>
        </div>
      </div>
    </div>

＆＃13;

Answer 1

您只需使用white-space:nowrap

即可

.img-list {
  margin-bottom: 20px;
  height: 100px;
  width: 100%;
  overflow: auto; /*Show horizontal scroll*/
}

@media (max-width: 600px) {
  .img-list {
    height: 50px;
  }
}

.img-container {
  height: 100%;
  position: relative;
  white-space:nowrap; /*Added this*/
}

.img-container img {
  height: 100%;
  display: inline-block;
  vertical-align:top; /*to remove unwanted whitespace */
  position: relative;
}

.img-main {
  width: 100%;
}

.img-main img {
  width: 100%;
}

<div class="img-main">
  <img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
  <div class="img-container">
    <img src="https://preview.ibb.co/gxVppG/img1.jpg">
    <img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
    <img src="https://preview.ibb.co/iQsPOb/img3.jpg">
    <img src="https://preview.ibb.co/gFFdib/img4.jpg">
    <img src="https://preview.ibb.co/hS5ppG/img5.jpg">
    <img src="https://preview.ibb.co/goKtGw/img6.jpg">
    <img src="https://preview.ibb.co/bSWjOb/img7.jpg">
    <img src="https://preview.ibb.co/i2o9pG/img8.jpg">
  </div>
</div>

Answer 2

Flexbox是不错的选择，但如果你想要，你可以添加到缩略图图像列表white-space: nowrap

这是jsfiddle：

.img-container {
  white-space: nowrap;
}

.img-container img {
  height: 80px;
  width: 80px;
  display: inline-block;
}

.img-list {
  height: 100px;
  width: 100%;
}

.img-main img {
  width: 100%;
}

<div class="img-main">
  <img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
  <div class="img-container">
    <img src="https://preview.ibb.co/gxVppG/img1.jpg">
    <img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
    <img src="https://preview.ibb.co/iQsPOb/img3.jpg">
    <img src="https://preview.ibb.co/gFFdib/img4.jpg">
    <img src="https://preview.ibb.co/hS5ppG/img5.jpg">
    <img src="https://preview.ibb.co/goKtGw/img6.jpg">
    <img src="https://preview.ibb.co/bSWjOb/img7.jpg">
    <img src="https://preview.ibb.co/i2o9pG/img8.jpg">
  </div>
</div>

我已经更新了CSS删除了不必要的样式。

Answer 3

我选择的解决方案是Flexbox！

上课.img-container：

添加display: flex; - 这会将容器变成灵活容器
添加flex-direction: row; - 这是默认设置，但说明了示例
添加flex-wrap: nowrap; - 这也是默认值，但也说明了示例
最后，将overflow更改为hidden

jsfiddle demo

我相信这可以达到你想要的。如果我弄错了，请告诉我。

水平对齐图像，隐藏溢出

3 个答案: