html - 将元素放在同一行

Question

如何将以下元素放在同一行？我知道它与 display 属性有关，但它总是让我感到困惑并且似乎永远无法开始工作。

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

You could use float: left or float: right

img {float: left;}

请注意，您必须使用 clearfix Gallagher 先生很好地解释了这一点，或者跟随任何具有 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，您应该像其他人提到的那样将 float 放在那些 div 上，但是这两个选项在技术上都适用于您的情况。可能还有十几种方法可以做到这一点......