0

要素をインラインブロックする必要があります。2つの要素を並べて表示したい。2 番目のブロック要素のリンクのテキストが長いテキスト (ワード ラップ) のために 2 行で表示される場合、リンクの親要素は 2 行目に表示されます。

次のフィドルでは、2 番目の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

インラインブロックで実行している理由はありますか?

要素をフロートさせると、はるかに簡単になります- 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 に答える