使div保持在父母的顶部

Question

我有一个"问题",乍一看看起来不像一个.所以,我有一个包含孩子的父div.一个孩子将包含文本,另一个孩子将包含图片.两者都是内联块元素(它们需要彼此相邻放置),并且具有设置宽度.现在,当图片div大于文本div时,父级继承该div的高度(最大的一个).但是第二个孩子(较小的)放在那个div的底部.我想要的是让div总是在顶部.

我试过了

top: 0px;

和东西,但它不起作用.它只是坚持到底.

这是我的示例(html)代码:

<div id="parent">
  <div id="child1"> Assassin's Creed IV: Black Flag: Gameplay Reveal Trailer - Chart your course through a treacherous and unpredictable world as the Assassin's Creed series hits the high seas in Assassin's Creed IV: Black Flag. <a href="http://bit.ly/Zny5pI">http://bit.ly/Zny5pI</a> </div>
  <div id="child2"> <img width="300px" src="http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/536527_10151407411789285_1500143344_n.jpg" /> </div>
</div>

这是CSS:

#parent {
  border: 2px solid green;
}

#child1 {
  border: 2px solid black;
  display: inline-block;
  width: 400px;
  margin: 2px;
  top: 0px;
}

#child2 {
  border: 2px solid red;
  display: inline-block;
  width: 300px;
}

我刚刚在GameTrailers的Facebook上发帖,作为一个例子.

任何人都可以通过解决这个"问题"来帮助我吗？我觉得这很难,但是我已经有一段时间了,因为我使用过CSS,这不是我最喜欢的"编码语言":P

提前致谢.

Answer 1

而不是display: inline尝试float: left。

Answer 2

尝试添加CSS规则:

vertical-align:top;

到你想要顶部对齐的所有内联块div

祝好运!

Answer 3

有几种不同的方法可以做到这一点，它们都应该有效。

1：

#parent > div{
    vertical-align: top;
}

2：

#parent{
    position: relative;
}
#parent > div{
    position: absolute;
    top: 0px;
}

3：

#parent > div{
    float: left;
}