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

而不是父/子使他们成为兄弟姐妹，而且因为你正在使用显示：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>

Answer 2

您需要将.about_me放在.about_me_pic之外，并设置较小的宽度/高度（如果总宽度大于该行，则第二个元素将放在下一行。

＆＃13;

＆＃13;

.about_me_pic {
    width: 103px;
    height: 137px;
    display: inline-block;
    position: relative;
}

.about_me {
    width:180px;
    height: 100px;
    display: inline-block;
    margin-left: 50px;
}

＆＃13;

<div class="about_me_pic">
  <img alt="hmmm" src="http://www.w3schools.com/tags/smiley.gif">
</div>
<div class="about_me">
  <i class="fa fa-hand-spock-o">Hi, my name is Jack Burum</i>
</div>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。