it-swarm.com.de

Bilder Inline über CSS anzeigen

Ich habe drei Bilder, die ich in einer Reihe nebeneinander anzeigen möchte.

Hier ist das 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>

Hier ist das CSS:

#client_logos { display: inline-block; }

Aus irgendeinem Grund werden nur zwei Logos nebeneinander angezeigt. Ich bin mir nicht sicher, was los ist. Irgendwelche Ideen?

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

Siehe Screenshot.enter image description here

19
Trent Scott

Sie haben einen Zeilenumbruch <br> zwischen dem zweiten und dritten Bild in Ihrem Markup. Wenn Sie das loswerden, wird es inline angezeigt.

14

Der Code, den Sie hier gepostet haben, und der Code auf Ihrer Website sind unterschiedlich. Es gibt eine Pause <br> Nach dem zweiten Bild, also dem dritten Bild in der neuen Zeile, entferne dieses <br> und es wird korrekt angezeigt.

5
pkachhia

Platzieren Sie diese CSS in Ihrer Seite:

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

Ersetzen

<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>

Zu

<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>
3
Vikas Umrao