Html 将两个 div 水平放置在彼此旁边
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13525333/
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
position two divs horizontal next to eachother
提问by Michel
on different projects i learned two different methods of positioning two divs horizontal next to each other. Is one better than the other, or is it just a matter of personal taste, or maybe one is only working by accidence/pure luck?
在不同的项目中，我学习了两种将两个 div 水平放置在一起的不同方法。一个比另一个更好，还是只是个人品味的问题，或者可能只是偶然/纯粹的运气？
method one:
方法一：
<div style="border:1px solid red;">
<div style="float:left;">
first
</div>
<div style="float:left;">
second
</div>
<div style="clear:both;">
</div>
method two:
方法二：
<div style="border:1px solid green;">
<div style="display:inline-block;">
first
</div>
<div style="display:inline-block;">
second
</div>
</div>
采纳答案by Ben
The first one is more widely supported in older browsers, but floatusually leads to some weird behavior (not bad, nothing that will break your design, just a little unexpected).
第一个在旧浏览器中得到更广泛的支持，但float通常会导致一些奇怪的行为（不错，没有什么会破坏您的设计，只是有点意外）。
You'll crank away with inline-blockonly to find something broken in your design when you check some random browser later on in the lifecycle.
你会曲柄废除inline-block才发现东西在生命周期的设计打破当您检查一些随机浏览器以后。
I usually stick with float, and only float.
我通常坚持使用float，并且只有float.
回答by Alex Gyoshev
Both are valid CSS that does not work by accident -- it depends what you need.
两者都是有效的 CSS，不会偶然起作用——这取决于您的需要。
When using floats, you will need to clear them (as in the posted code); when using inline-blocks, this is not necessary. Also, you can use text-alignto align the inline-blockelements, while there is no float: middle. You can also use the vertical-alignproperty to align the boxes as you need.
使用floats 时，您需要清除它们（如发布的代码中所示）；使用inline-blocks 时，这不是必需的。此外，您可以使用text-align来对齐inline-block元素，而没有float: middle. 您还vertical-align可以根据需要使用该属性来对齐框。
As others said, there are some issues with inline-block, most notably that older IEs don't support it (much) on block elements (note that it works fine on inline elements, like <span>). You can work around that with the following hack:
正如其他人所说， 存在一些问题inline-block，最显着的是较旧的 IE 在块元素上不支持它（很多）（请注意，它适用于内联元素，例如<span>）。您可以使用以下 hack 解决此问题：
.selector {
display: inline-block;
*display: inline;
zoom: 1;
}
回答by Jan Han?i?
If you are using the second method then there's no point in using a DIVif you are then turning it into a inline element. Just use a SPANtag.
如果您使用的是第二种方法，那么使用DIVif 将其转换为内联元素是没有意义的。只需使用一个SPAN标签。
So if you are trying to align block level elements/tags, use the first method.
因此，如果您尝试对齐块级元素/标签，请使用第一种方法。
