은 단일 행에

Question

내 바이올린 모든 떠 항목에 맞게 :

http://jsfiddle.net/trK7C/

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 항목은에 다음 행으로 수레 페이지

가로 스크롤 막대가없는 같은 행에 세 번째 항목을 맞추려면 어떻게해야합니까?

Answer 1

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 -->