html - CSS父子元素在同一行

Question

我试图将父元素和子元素保持在同一行。

网站的结构是这样的:

.about_me_pic {
  width: 200px;
  height: 270px;
  display: inline-block;
  vertical-align: top;
}
.about_me {
  width: 700px;
  height: 1000px;
  display: inline-block;
  vertical-align: top;
}

<div class="about_me_pic">
  <img alt="hmmm" src="/assets/jack_and_mom.png">

  <div class="about_me">
    <i class="fa fa-hand-spock-o">Hi, my name is Jack Burum</i>
  </div>
</div>

在这种情况下，about_me_pic 位于 about_me 内容之上，我希望它们彼此对齐。

Answer 1

不要成为父/子，而是让它们成为 sibling ，并且因为您正在使用 display:inline-block 小心 whitespace它创造的。请参阅下面的片段:

代码片段

* {
  margin: 0;
  padding: 0
}
#wrap {
  width: 1033px;
  font-size: 0 /*fix inline-block gap*/
}
.about_me_pic {
  width: 333px;
  height: 337px;
  display: inline-block;
  vertical-align: top
}
.about_me {
  width: 700px;
  height: 1000px;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  background:lightblue /*demo */
}

<div id="wrap">
  <div class="about_me_pic">
    <img alt="hmmm" src="//lorempixel.com/333/337">
  </div>
  <div class="about_me">
    <i class="fa fa-hand-spock-o">Hi, my name is Jack Burum</i>
  </div>
</div>