内联块无法正常工作？

Question

我有一个图像旁边有一个容器，我遇到了让它们正确对齐的问题。我在网站的其余部分使用了inline-block，并且没有任何问题。

如果有人知道如何解决这个问题，那就太棒了。

这是我的代码：

＆＃13;

＆＃13;

.talentcontainer {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background-color: #fff;
}
.talentimg {
  width: 250px;
  height: 280px;
  max-width: 80%;
  text-align: center;
  display: inline-block;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* future proofing */
  -khtml-border-radius: 10px;
  /* for old Konqueror browsers */
  overflow: hidden;
  margin: 0 auto;
}
.talentcontent {
  width: 450px;
  height: auto;
  max-width: 80%;
  text-align: center;
  display: inline-block;
  background-color: #000;
  margin: 0 auto;
  min-height: 280px;
  margin: 0 auto;
}

＆＃13;

<div class="talentcontainer">
  <div class="talentimg">
    <img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png">
  </div>
  <div class="talentcontent">
    <h8>NAME HERE</h8>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

h是我所遇到的问题的图像：

Answer 1

vertical-align: top与display: inline-block一起使用。

.talentcontainer {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background-color: #fff;
}
.talentimg {
  width: 250px;
  height: 280px;
  max-width: 80%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* future proofing */
  -khtml-border-radius: 10px;
  /* for old Konqueror browsers */
  overflow: hidden;
  margin: 0 auto;
}
.talentcontent {
  width: 450px;
  height: auto;
  max-width: 80%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  background-color: #000;
  margin: 0 auto;
  min-height: 280px;
  margin: 0 auto;
}

<div class="talentcontainer">
  <div class="talentimg">
    <img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png">
  </div>
  <div class="talentcontent">
    <h8>NAME HERE</h8>
  </div>
</div>

Answer 2

您也可以通过浮动元素来完成此操作。 为这两个元素添加左浮动。

.talentimg{
    float:left;
}

.talentcontent{
    float:left;
}