水平对齐图像并隐藏溢出

Question

我想制作一个带有缩略图的图像滑块以供选择，我的想法是水平对齐所有图像并隐藏overfolwn而不是使用javascript我只会更改左侧位置以显示所需的缩略图，但我无法弄清楚如何css图像水平对齐并隐藏超出缩略图容器的部分，我使用spectre 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

这里是 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：

1. 添加display: flex; - 这会将容器变成弹性容器
2. 添加flex-direction: row; - 这是默认设置，但用于说明示例
3. 添加flex-wrap: nowrap; - 这也是默认设置，但也说明了示例
4. 最后，将overflow 更改为hidden

jsfiddle demo

我相信这可以实现您的愿望。如果我弄错了，请告诉我。