3

我有一个乍一看不像的“问题”。所以，我有一个包含孩子的父 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

提前致谢。

4

5 回答 5

9

尝试添加 CSS 规则：

vertical-align:top;

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

祝你好运！

于 2013-03-25T17:56:11.340 回答
8

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

于 2013-03-25T17:58:20.803 回答
5

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

1：

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

2：

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

3：

#parent > div{
    float: left;
}
于 2013-03-25T17:56:15.387 回答
1 
#parent > div {vertical-align: top}
于 2013-03-25T17:56:04.363 回答
0

您总是可以使用绝对定位来做到这一点，尽管这通常会导致问题，尝试并坚持相对定位。

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;
}
于 2013-03-25T18:05:40.223 回答