20

並べて表示したい画像が3つあります。

HTMLは次のとおりです。

<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>

CSSは次のとおりです。

#client_logos { display: inline-block; }

何らかの理由で、2つのロゴだけが隣り合って表示されます。何が悪いのかわからない。何か案は？

URL： http: //rainleader.com/who-we-are/

スクリーンショットを参照してください。ここに画像の説明を入力してください

4

3 に答える 3

15

<br>マークアップの2番目と3番目の画像の間に改行があります。それを取り除くと、インラインで表示されます。

于 2012-11-07T04:39:32.273 に答える
5

ここに投稿したコードとサイトのコードはどちらも異なります。2番目の画像の後に切れ目がある<br>ので、3番目の画像を新しい行に挿入します。これ<br>を削除すると、正しく表示されます。

于 2012-11-07T04:44:23.873 に答える
4

このcssをページに配置します。

<style>
   #client_logos {
    display: inline-block;
    width:100%;
    }
  </style>

交換

<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" /></p>

に

<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>
于 2012-11-07T04:53:08.153 に答える