将元素放在同一行上

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

感谢您。 :)

- John Smith

---

尝试运行下面发布的代码。 - JDGuide

Answer 1

You could use float: left or float: right

img {float: left;}

请注意，您需要使用清除浮动技巧，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 left，但在你的情况下两个选项都可以在技术上起作用。可能还有十几种方法来完成这个...

- jamil

Answer 2

将您的.thumbnail-last规则中的display:block更改为display:inline-block即可。

- Paul Roub

Answer 3

尝试这段代码： - 仅使用 float:left。

<div class="container">
      <div class="small-video-section">
        <div class="thumbnail-container"  style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-container" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-container" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-last" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
      </div>
    </div>

你的代码都没问题。但是，我只在 HTML 部分添加了 style。

更新链接：

http://jsfiddle.net/MgcDU/4148/

它工作得很好。

- JDGuide

Answer 4

尝试在 div 上使用 float: left。这将使所有内容都在同一行上显示。否则块级元素会导致换行。

- DevZer0

Answer 5

这是一篇旧帖子，但当我搜索如何在Bootstrap中将元素放置在同一行时，它出现了，所以我想帮助其他人。
Bootstrap有内联表单类来将某些元素放置在同一行（左对齐）。
Bootstrap CSS内联表单

- Yuval Simhon

---

他不是在制作表单，因此Bootstrap的网格系统将是更好的解决方案。 - totoro

使用网格系统时，如果不使用display属性，很难强制使元素在同一行上。 - Yuval Simhon