长文本会导致内联元素显示在下面

Question

我必须内联块元素。我想并排显示这两个元素。当第二个块元素中的链接文本由于长文本（自动换行）显示在两行上时，链接父元素将显示在第二行。

在小提琴波纹管中，第二个div.job_content块应像第一个块一样显示（并排）。

知道吗？

这是小提琴：

.content {
  width: 300px;
}
.job-content {
  border: 1px solid red;
  margin: 20px 0;
}
.job-thumbnail {
  display: inline-block;
}
.job-thumbnail img {
  margin: 10px 10px 5px;
  max-width: none;
  border: none;
}
.job-title {
  display: inline-block;
  vertical-align: top;
}

<div class="content">
  <div class="job-content">
    <div class="job-thumbnail">
      <img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
    </div>
    <div class="job-title">
      <a href="" title="Permalien vers Inspecteur(trice) du permis de conduire et de la sécurité routière" rel="bookmark">Small text</a>
      <dl class="">
        <dt class="study_level">Niveau requis:</dt>
        <dd>
          <a href="#" rel="tag">bac ou équivalent</a>
        </dd>
      </dl>
    </div>
  </div>
  <div class="job-content">
    <div class="job-thumbnail">
      <img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
    </div>
    <div class="job-title">
      <a href="" title="Permalien vers Inspecteur(trice) du permis de conduire et de la sécurité routière" rel="bookmark">Large text du permis de conduire et de la
                    sécurité routière</a>
      <dl class="">
        <dt class="study_level">Niveau requis:</dt>
        <dd>
          <a href="#" rel="tag">bac ou équivalent</a>
        </dd>
      </dl>
    </div>
  </div>
</div>

下面是一个更简单的示例：

.wrapper {
    border: 1px solid red;   
}
.thumbnail {
    display: inline-block;
    margin-right: -80px;
    width: 80px;        
}
.text {
    display: inline-block;
    vertical-align: top;
    width: auto;
    padding-left: 80px;
}

<div class="wrapper">
  <img width="80" height="80" class="thumbnail" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
  <a href="#" class="text">
    This text shouldn't be pushed downwards when the "result" frame is resized
  </a>
</div>

只需调整结果框的大小，即可查看向下推送的文本...我以前做过这个，我不明白有什么问题...

Answer 1

看看这个jsfiddle

.content {
    width: 700px;  
}
.job-content {
    display:inline-block;
    border: 1px solid red;   
    margin: 20px 0;     
}
.job-thumbnail {
    display: inline-block;  
}
.job-thumbnail img {
    margin: 10px 10px 5px;
    max-width: none;
    border: none;
}
.job-title {
    display: inline-block;
    vertical-align: top;
    width:190px;
}

Answer 2

你运行内

联块有什么原因吗？

如果你浮动元素，那就更容易做到了 - http://jsbin.com/ojoloq/1/edit

更新

删除内联块并使用浮点数即可解决问题（http://jsfiddle.net/DxTg2/12/）

.wrapper {
    border: 1px solid red;
float:left;            
}
.thumbnail {
    float:left;
   margin-right: -80px;
    width: 80px;        
}
.text {
    float:left;
vertical-align: top;
    width: auto;
    padding-left: 80px;
}