如何将DIV元素放置在彼此相邻的图像上

我有5个图像要放在彼此的旁边，这些图像将成为左右滑动的滑块。无论我尝试什么，似乎都没有让它走到彼此的旁边。我试过float：left，position：absolute，display：inline。如何将DIV元素放置在彼此相邻的图像上

这里是我的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%; 
}

来源

2014-02-28 user3323889

70％是有点太多了...或者？你希望它真的是70％，而不是每隔一个接一个呢？ –

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我们可以nowrap父元素white-space上使用，这将确保以防止内部inline或inline-block元素包裹。

如上所述，我们需要分别将幻灯片设置为inline-block。使用上，他们会在一个内嵌流，这意味着，如果你的HTML你必须在一个新行每张幻灯片，一个4px元素inline-block的

（这是一个空白！）差距旁边将出现每张幻灯片。

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

上使用如果您打算让您的幻灯片中的文本比你需要设置font-size:16px回你的孩子的幻灯片。

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

来源

2014-02-28 07:25:04

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

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

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

来源

2014-02-28 07:20:25 CRABOLO

谢谢，有点帮助，但现在的图像是在彼此的顶部，而不是坐在一起 – user3323889

你IMG在申报单，使他们各拿页面的整个宽度。您可以通过的div “内联” 改变这种行为：

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

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

来源

2014-02-28 07:20:33

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

你可以计算出它;-)

来源

2014-02-28 07:23:05

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

进一步援助按照链接..：

来源

2014-02-28 07:30:18

如何将DIV元素放置在彼此相邻的图像上

回答

相关问题