水平对齐图像与溢出隐藏

Question

我想制作一个带有缩略图以供选择的图像滑块，我的想法是将所有图像水平地组合起来，并将其隐藏起来，而不是使用javascript，我将更改左边的位置以显示所需的缩略图，但我想不出如何将幽灵图像对齐，并隐藏超出this容器的部分，我使用的是css框架，我的HTML看起来就像这样。

​

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

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

​

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是一个不错的选择，但是如果您想要添加到div中，可以添加一个缩略图图像列表white-space: nowrap。

这是小提琴手：

​

.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类

1. 添加display: flex; --这会将容器转换为flex容器。
2. 添加flex-direction: row; --这是默认的，但说明了示例
3. 添加flex-wrap: nowrap; --这也是默认的，但也说明了示例
4. 最后，将overflow更改为hidden

小提琴演示

我相信这能实现你想要的。如果我搞错了请告诉我。