0

私のフィドル：

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 番目のアイテムは、ページの次の行に移動します

水平スクロールバーなしで同じ行に3番目のアイテムを収めるにはどうすればよいですか?

4

1 に答える 1

2

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

float:left を display:inline-block に変更し、それを保持するのに十分な幅のコンテナーにすべてをラップします。

#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-17T11:14:52.153 に答える