将所有浮动项目放在一行中答案

【问题标题】：fit all floated items in a single row将所有浮动项目放在一行中
【发布时间】：2013-02-17 11:05:25
【问题描述】：

我的小提琴：

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;

}

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

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

【问题讨论】：

当我增加你的小提琴窗口的大小时，它会正确显示..或者你想在 jsFiddle 上的大小的窗口上达到预期的效果？
这只是一个示例，假设 jsfiddle 中的默认宽度是可用的最大宽度，例如实际用例中的最大浏览器窗口/屏幕尺寸
是否可以调整图片大小/缩小图片大小？
尝试将图片的宽度设置为百分比，比如33%
在我的实际使用中我不想调整图像大小。我能够通过显示为内联块的 div 来实现我所要求的。但我想知道这是否可以用 float:left

标签： css-float row css

【解决方案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 -->

【讨论】：

正如我上面提到的，我可以使用 display:inline-block 来做到这一点，这可以用 float:left 来完成吗？不可能？原谅我的无知
@gauravjain，如果你替换 display:inline-block; 会得到同样的结果浮动：左；在上面的例子中
@gauravjain 问题不在于显示或浮动。问题是两者都设计为包装到其容器的宽度。我只是更喜欢内联块，特别是对于 div 的。您可能能够找出溢出的东西，但这可能会产生滚动条。
我会坚持使用 inline-block。虽然我仍然很好奇这是否也可以用浮动来完成。我将在星期一接受您的答复，等待更多答复...再次感谢