Question

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

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，或者跟随任何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，你应该像其他人提到的那样把浮动留在那些，但是这两个选项在你的情况下技术上都适用。这可能还有十多种方法......

Answer 2

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

Answer 3

在div上尝试float: left。这将使每个人都能排队。其他明智的块元素引入了一个中断

Answer 4

试用此代码： - 仅使用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/

工作正常。

Answer 5

这是一个很老的帖子，但是在使用bootstrap在同一行上搜索place元素时会出现，所以我会帮助其他人。
Boostrap具有Inline表单类，可以将一些元素放在同一行上（它左对齐）。
Bootstrap CSS inline form

将元素放在同一行

5 个答案: