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

查看this 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

你有没有理由使用inline-block运行？

如果浮动元素，则更容易做到 - 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;
}

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

2 个答案: