0

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

在小提琴下面，第二个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>

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

4

2 回答 2

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;
}
于 2012-08-08T04:26:44.683 回答
0

你有什么理由使用 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;
}
于 2012-08-08T23:30:11.927 回答