使div停留在父项的顶部 [英] Make div stay in top of parent

问题描述

我有一个问题"，乍一看看上去并不像.因此，我有一个包含childs的父div.一个孩子将包含文本，另一个孩子将包含图片.两者都是行内块元素(它们必须彼此相邻放置)，并且具有设置的宽度.现在，当图片div大于文本div时，父级继承该div的高度(最大).但是第二个孩子(较小)位于该div的底部.我想要的是让该div始终位于顶部.

I have a "problem" that at first sight didn't look like one. So, I have a parent div containing to childs. The one child will contain text, and the other a picture. Both are inline-block elements (they need to be positioned next to each other), and have set widths. Now, when the picture div is bigger than the text div, the parent inherits the height of that div (the biggest one). But the second child (which is smaller) is placed at the bottom of that div. What I want is to have that div always at the top.

我尝试过

top: 0px;

和其他内容，但不起作用.它只是坚持到底.

and stuff, but it doesn't work. It just sticks to the bottom.

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

Here's my sample (html) code:

<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上的帖子为例.

I just took a post on Facebook by GameTrailers as an example.

有人可以解决这个问题"吗?我认为这并不难，但是自从我使用CSS以来已经有一段时间了，而且它不是我最喜欢的编码语言":P

Could anyone help me by solving this "problem"? I don't think it's hard, but it's been a while since I've worked with CSS, and it's not my favorite "coding language" :P

谢谢.

推荐答案

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

这篇关于使div停留在父项的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！