Question

我想要将5张图像放在一起，这些图像将成为一个向左或向右滑动的滑块。无论我尝试什么似乎没有什么似乎让它彼此相邻。我试过浮动：左，位置：绝对，显示：内联。

这是我的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或 {{1 }} 元素。

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

在元素上使用内联块，它们将在内联流中，这意味着如果在HTML中你有一个新行中的每张幻灯片，inline-block（它是一个空格！）每张幻灯片旁边都会出现间隙。

删除它在父元素4px

上使用

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

font-size:16px或任何其他对齐值确保将图片放置在其父容器内的垂直位置。

Answer 2

这是因为你给每张图片的宽度为70％。所以每张图片都占据了一条新线。如果你有5张图像，那么将它们全部放在同一行上的最大宽度将是20％。但是任何填充/边框/边距都会增加，所以你可能需要低于20％。

http://jsfiddle.net/rNa9v/1/

.portfolio-single {
    float: left;
    width: 10%;  /* changed to 10% instead of 70% */
}

Answer 3

你的img在div中，所以它们各自占据页面的整个宽度。您可以通过使div“内联”来更改此行为：

.portfolio-single {display: inline-block;}

http://jsfiddle.net/9377D/2/

Answer 4

.portfolio-single {
    float: left;
    width: 16%;     /* 100/6 */
}

你可以计算它; - ）

Answer 5

在这里你可以改变div选项。它可以解决问题。

如需进一步的帮助，请点击链接..：http://www.w3schools.com/css/css_align.asp

如何将DIV元素与图像放在一起

5 个答案: