Div相对于另一个向下移动

Question

请帮帮我。我想在同一条线上有两个div，但其中一个是向下移动的。

<div style="height:200px;width:200px;display:inline-block;">
<div style="height:200px;width:200px;background:#000000;"></div>
</div>

<div style="height:200px;width:200px;display:inline-block;border:1px solid #000000;">
1<br>2</div>

示例jsfiddle.net

Answer 1

您需要向两个外部div添加相同的vertical-align。

vertical-align: top;

jsFiddle Demo

顺便说一句 - 使用内联样式是不明智的。使用外部CSS文件/块来使事情变得更好。

• Best practices: Avoid using inline-styles
• What's so bad about in-line CSS?

Answer 2

您需要使用vertical-align:top;

将css vertical-align:top;添加到<div>

的display:inline-block;

示例 http://jsfiddle.net/9TZsy/2/

这是一篇很棒的文章：http://css-tricks.com/what-is-vertical-align/
另一个：http://www.impressivewebs.com/css-vertical-align/

Answer 3

将float:left添加到两者而不是display:inline-block

的jsfiddle：

http://jsfiddle.net/9TZsy/3/