如何对齐宽度为100％的3张图片

Question

我会制作一个旋转木马，我尝试将左边3个元素对齐，宽度为100％，但不起作用。

有人可以告诉我如何在左边对齐3,4个元素以离开屏幕，以便我可以使用transform css属性更改图像吗？

当我从页面顶部删除时它起作用但当我插入它时，一切都毁了。

＆＃13;

＆＃13;

.carousel {
  width: 100%;
  margin: 0;
  background-color: #ccc;
  position: relative;
  overflow-x: hidden;
}

.carousel--list {
  margin: 0;
  padding: 0;
}

.carousel--slide {
  background: #000;
  text-align: center;
  color:#fff;
  width:100%;
  display: inline-block;

  overflow: hidden;
  height: 400px;
  padding: 0;
}

.carousel--track{
  width: auto;
  -webkit-transition: transform 2s;
   transition: transform 2s;
}

.carousel--buttons {
  content: "";
  clear: both;
  display: table;
}

.slide--image {
  width: 100%;
}
.red{
  background: red;

}

.blue{
  background: blue;
}

.yellow{
  background: yellow;
}
/* transform .*/

＆＃13;

<section class="carousel">
  <div class="carousel--track">
    <div class="carousel--list">
      <div class="carousel--slide red" data-index="0">
        <img class="slide--image" src="./images/carousel/slider-bg.png">
      </div>
      <div class="carousel--slide blue" data-index="1">
    <img class="slide--image" src="./images/carousel/slider-bg.png">
      </div>
      <div class="carousel--slide yellow" data-index="2">
            <img class="slide--image" src="./images/carousel/slider-bg.png">
      </div>
    </div>
  </div>
<div class="carousel--buttons">
  <button onclick="prevSlide()" class="btn--prev btn">Prev</button>
  <button onclick="nextSlide()" class="btn--next btn">Next</button>
</div>
</section>

＆＃13;

＆＃13;

＆＃13;

提前致谢！

Answer 1

您可以使用flexbox或bootstrap。有了这些，你就可以编辑你的代码作为一个平台，并将元素放在你想要的地方。

Flexbox是一个css引擎。也许你需要什么！

bootstrap的示例：

flexbox：

Answer 2

将white-space: nowrap应用于父.carousel--list类...它会将所有内部inline-block项包装在一行中。

注意 ：我已将transform(-30px)应用于.carousel--list，以便为您提供视觉

Stack Snippet

.carousel {
  width: 100%;
  margin: 0;
  background-color: #ccc;
  position: relative;
  overflow-x: hidden;
}

.carousel--list {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transform: translateX(-30px);
}

.carousel--slide {
  background: #000;
  text-align: center;
  color: #fff;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  height: 150px;
  padding: 0;
}

.carousel--track {
  width: auto;
  -webkit-transition: transform 2s;
  transition: transform 2s;
}

.carousel--buttons {
  content: "";
  clear: both;
  display: table;
}

.slide--image {
  width: 100%;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}


/* transform .*/

<section class="carousel">
  <div class="carousel--track">
    <div class="carousel--list">
      <div class="carousel--slide red" data-index="0">
        <img class="slide--image" src="http://via.placeholder.com/350x150/f00">
      </div>
      <div class="carousel--slide blue" data-index="1">
        <img class="slide--image" src="http://via.placeholder.com/350x150/00f">
      </div>
      <div class="carousel--slide yellow" data-index="2">
        <img class="slide--image" src="http://via.placeholder.com/350x150/f0f">
      </div>
    </div>
  </div>
  <div class="carousel--buttons">
    <button onclick="prevSlide()" class="btn--prev btn">Prev</button>
    <button onclick="nextSlide()" class="btn--next btn">Next</button>
  </div>
</section>