Afbeeldingen inline weergeven via CSS

Ik heb drie afbeeldingen die ik in een enkele rij naast elkaar wil weergeven.

Hier is de 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 is de CSS:

#client_logos { display: inline-block; }

Om de een of andere reden worden er slechts twee logo’s naast elkaar weergegeven. Ik weet niet zeker wat er mis is. Enig idee?

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

Zie screenshot.


Antwoord 1, autoriteit 100%

Je hebt een regeleinde <br>tussen de tweede en derde afbeelding in je opmaak. Als je dat weggooit, wordt het inline weergegeven.


Antwoord 2, autoriteit 33%

De code die u hier heeft gepost en de code op uw site zijn beide verschillend. Er is een onderbreking <br>na de tweede afbeelding, dus de derde afbeelding in een nieuwe regel, verwijder deze <br>en het wordt correct weergegeven.


Antwoord 3, autoriteit 20%

Plaats deze css op je pagina:

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

Vervangen

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

Naar

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

Other episodes