Html 将元素放在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16493339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting elements on the same line
提问by John Smith
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
如何将以下元素放在同一行上？我知道它与 display 属性有关，但这是一个总是难倒我并且似乎永远无法开始工作的属性。
http://jsfiddle.net/MgcDU/4137/
http://jsfiddle.net/MgcDU/4137/
HTML:
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:
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;
}
Thanks. :)
谢谢。:)
采纳答案by jamil
You could use float: leftor float: right
img {float: left;}
Note, you'll have to use clearfixwhich Mr Gallagher explains nicely or follow with any element that has clear: both;on it to get the results you expect.
请注意，您必须使用加拉格尔先生解释得很好的 clearfix或遵循其上的任何元素clear: both;以获得您期望的结果。
You can position them absolutely
你可以绝对定位它们
img {position: absolute;}
and then position one by one using leftand rightor margins
然后使用left和right或边距一一定位
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
编辑：没有注意到 div，您应该像其他人提到的那样将浮动放在那些 div 上，但是这两个选项在技术上都适用于您的情况。可能还有十几种方法可以做到这一点......
回答by Paul Roub
Changing display:blockto display:inline-blockin your .thumbnail-lastrule will do it.
在您的规则中更改display:block为即可。display:inline-block.thumbnail-last
回答by DevZer0
try float: lefton the divs. That will get everyone to show up in line. other wise block elements introduce a break
尝试float: left在 div 上。这将使每个人都出现在队列中。其他明智的块元素引入了休息
回答by JDGuide
Try this code :- Use only float:left
试试这个代码：- 仅使用 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>
All your code are ok. But , I have only added stylein HTML part.
你所有的代码都没问题。但是，我只添加style了 HTML 部分。
Update link :-
更新链接：-
http://jsfiddle.net/MgcDU/4148/
http://jsfiddle.net/MgcDU/4148/
Its working fine.
它的工作正常。
回答by yuval simhon
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form
这是一篇旧帖子，但它是在使用引导程序在同一行上搜索位置元素时出现的，因此我会帮助其他人。
Boostrap 具有 Inline 表单类，可以将一些元素放在同一行上（左对齐）。
Bootstrap CSS 内联表单
