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

尝试添加CSS规则：

vertical-align:top;

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

祝你好运！

Answer 2

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

1：

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

2：

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

3：

#parent > div{
    float: left;
}

Answer 3

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

Answer 4

#parent > div {vertical-align: top}

Answer 5

你总是可以通过绝对定位来做到这一点，虽然这通常会导致问题，但要坚持相对定位。

http://jsfiddle.net/C6n86/

#parent {
   border: 2px solid green;
   width: 504px;
   margin: 0px;
   padding: 0px;
   position: relative;
   float: left;
}

#child1 {
  position: absolute;
  top: 0px;
  float: left;
  height: 279px;
  color: white;
}

#child2 {
  position: absolute;
  top: 0px;
  float:left;
}

使div保持在父母的顶部

5 个答案: