将元素放在同一行

Question

如何将以下元素放在同一行？我知道它与显示属性有关,但那是一个总是让我感到困惑并且似乎无法开始工作的人.

http://jsfiddle.net/MgcDU/4137/

HTML:

<div class="container">
  <div class="small-video-section">
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-last">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
  </div>
</div>

CSS:

.small-video-section {
  height: 134px;
}

.thumbnail-container {
  width: 220px;
  margin-top: 15px;
  margin-right: 20px;
  display: inline-block;
}

.thumbnail-last {
  width: 220px;
  margin-top: 15px;
  display: block;
}

谢谢.:)

Answer 1

你可以使用float: left或float: right

img {float: left;}

请注意,您必须使用加拉格尔先生很好地解释的clearfix,或者使用其上的任何元素clear: both;来获得您期望的结果.

你可以绝对定位它们

img {position: absolute;}

然后使用left和/ right或边距逐个定位

img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/

编辑:没有注意到div,你应该像其他人提到的那样把浮动留在那些,但是这两个选项在技术上都适用于你的情况.可能还有十几种方法可以做到这一点......