適合所有浮動元素在單行

HTML：

<div class="itemsContainer"> 
    <div class="image"> 
     <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/> 
    </div> 
</div> 
<div class="itemsContainer"> 
    <div class="image"> 
     <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/> 
    </div> 
</div> 
<div class="itemsContainer"> 
    <div class="image"> 
     <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/> 
    </div> 
</div> 
<div class="clear">

CSS：

.itemsContainer { 
    float: left; 
    width : 300px; 
    height : 300px; 
    margin-left : 2px; 
    border : 1px solid black; 
    position : relative; 
} 

.image { 
    width : 300px; 
    height : 175px; 
    margin-bottom : -115px; 
    z-index : -1; 
    border : 1px solid green; 
} 

.image img { 
     width : 300px; 
    height : 175px; 

}

第3項浮到下一行的第

號

如何在沒有水平滾動條的情況下將第三項放入同一行中？

來源

2013-02-17 gaurav jain

當我增加你的小提琴窗口的大小，它可以正確顯示..或者你想達到與在的jsfiddle一個尺寸上的窗口預期的效果？ – Dygestor 2013-02-17 11:08:28

這只是一個例子，假設jsfiddle中的默認寬度是可用的最大寬度，如實際使用情況下的最大瀏覽器窗口/屏幕大小 – 2013-02-17 11:10:17

是否可以調整/縮小圖像大小？ – 2013-02-17 11:10:40

http://jsfiddle.net/trK7C/4/

變化浮動：左到顯示：內聯塊，並用足夠的寬度大包裝所有的它在容器中以將其保持。

#container { 
    width:940px; 
} 
.itemsContainer { 
    display:inline-block; 
    width : 300px; 
    height : 300px; 
    margin-left : 2px; 
    border : 1px solid black; 
    position : relative; 
} 

<div id="container"> <!-- holds all the html in the fiddle -->

來源

2013-02-17 11:14:52 fredsbend

正如我上面提到的，我能夠使用display：inline-block，可以用float：left來完成嗎？不可能？原諒我的無知 – 2013-02-17 11:16:27

@gauravjain，如果你將取代display：inline-block;浮動：左邊;在上面的例子中 – artnikpro 2013-02-17 11:19:48

@gauravjain問題不是顯示或浮動。問題是兩者都被設計爲包裝到其容器的寬度。我只是喜歡內聯塊，特別是對於div。你可能能夠找出溢出的東西，但這可能會使滾動條。 – fredsbend 2013-02-17 11:21:04

適合所有浮動元素在單行

回答

相關問題