css-float - 将所有浮动项目放在一行中

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;

}

第三项浮动到页面的下一行

如何在没有水平滚动条的情况下将第三个项目放在同一行中？

Answer 1

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