Képek egymás mellé, hogyan?

**ariel** · 2020-05-16, 07:53

Help...
A következőt dolgot szeretném megoldani egy WP oldalam bejegyzésében:
3 darab kép kerüljön egymás mellé, mondjuk 120x120 méretben, közepére rendezve.
A képek egy-egy külső oldalra hivatkozzanak, és mind ez mobilon se törjön el.
Lehetőleg valami html megoldásra van szükség, mert a CSS-ben nem vagyok otthon.
Minden segítségest megköszönök.

**apacska** · 2020-05-16, 09:55

HTML kód:

<div style="display:flex;justify-content:center;">
  <a href="">
    <img src="https://via.placeholder.com/120" alt="" />
  </a>
  <a href="">
    <img src="https://via.placeholder.com/120" alt="" style="margin:0 5px;" />
  </a>
  <a href="">
    <img src="https://via.placeholder.com/120" alt="" />
  </a>
</div>

**ariel** · 2020-05-16, 14:26

Húúú, nagyon köszönöm, már majdnem tökéletes, de a képek között képe egy pár pixel szünet, mert egybe csúsztak.

**ariel** · 2020-05-16, 14:37

Ezen kód mellett:

<div style="display:flex;justify-content:center;">
<a href="valami.hu">
<img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="budapest.png" alt="valami" width="150 />
</a>
<a href="valami.hu">
<img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="budapest.png" alt="valami" width="150 style="margin:0 5px;" />
</a>
<a href="valami.hu">
<img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="budapest.png" alt="valami" width="150" />
</a>
</div>

**apacska** · 2020-05-16, 17:39

Elfelejtetted az idézőjeleket bezárni a width után.

HTML kód:

<div style="display:flex;justify-content:center;">
  <a href="valami.hu">
    <img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="https://via.placeholder.com/150" alt="valami" width="150" />
  </a>
  <a href="valami.hu" style="margin:0 5px;">
    <img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="https://via.placeholder.com/150" alt="valami" width="150" />
  </a>
  <a href="valami.hu">
    <img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="https://via.placeholder.com/150" alt="valami" width="150" />
  </a>
</div>

**apacska** · 2020-05-16, 17:40

Elfelejtetted az idézőjeleket bezárni a width után.

HTML kód:

<div style="display:flex;justify-content:center;">
  <a href="valami.hu">
    <img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="budapest.png" alt="valami" width="150" />
  </a>
  <a href="valami.hu" style="margin:0 5px;">
    <img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="budapest.png" alt="valami" width="150" />
  </a>
  <a href="valami.hu">
    <img style="border: 1px solid #cccccc!important; padding: 4px!important;" src="budapest.png" alt="valami" width="150" />
  </a>
</div>