css - 如何将带有图像的 DIV 元素并排放置

Question

我有 5 张图像，我想将它们并排放置，这些图像将成为一个向左或向右滑动的 slider 。无论我尝试什么，似乎都无法使它们彼此相邻。我试过 float:left, position:absolute, display: inline。

这是我的html

<div class="slider-wrapper">
                <div class="slider">
                    <div class="portfolio-overlay">

                            <div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
                            <div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
                            <div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
                            <div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
                            <div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
                            <div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>

                    </div>   
                </div>

这是我的CSS

.slider-wrapper {
padding: 25px 0 0;
}

.portfolio-single {
float: left;
width: 70%;
}

Answer 1

DEMO WITH ANIMATION

DEMO

.slider-wrapper {
  overflow:hidden; /* to remove page scrollbars */
  padding: 25px 0 0;
  white-space:nowrap;
  font-size:0; /* to remove ~4px whitespace */
}

.portfolio-single {
  /*reset fontsize if needed*/
  display:inline-block;
  width:70%;
}
.portfolio-single img{
  vertical-align:top;
  width:100%;
}

在不使用 align-left 的情况下，我们可以在父元素上使用 white-space 作为 nowrap，这将确保防止换行内部 inline 或 inline-block 元素。

如上所述，我们需要分别将幻灯片设置为inline-block。

在元素上使用内联 block ，它们将处于内联流中，这意味着如果在您的 HTML 中，每张幻灯片都换行，4px(这是一个空白!) 每张幻灯片旁边都会出现间隙。

在父元素上删除它 font-size:0;

如果您计划在幻灯片中包含文本，则需要将 font-size:16px 设置回您的子幻灯片。

vertical-align:top 或任何其他对齐值确保将您的图像放置在其父容器内正确的垂直位置。