Question

我的小提琴：

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项放在同一行而没有水平滚动条？

Answer 1

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

更改float：left to 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 -->

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

1 个答案: