Problem z umiejscowieniem tekstu pod zdjęciem.

pytanie zadane 3 września 2018 w HTML i CSS przez Meffy Użytkownik (730 p.)

Witam mam taki problem, iż jak próbuję umiejscowić w divach pod zdjęciem jakiś tekst bezpośrednio to zdjecia układają sie pionowo zamiast zostać w szyku poziomo tak jak to było przed dodaniem tekstu. Co powinienem zastosować żeby było.

Zdjecie 1 Zdjecie 2 Zdjecie 3

Opis Opis Opis

komentarz 3 września 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Co powinienem zastosować żeby było.

Najlepiej dać nam kod... i to dobrze np. na codepen :) Bez tego nie ma jak Ci pomóc.

komentarz 3 września 2018 przez Meffy Użytkownik (730 p.)

https://codepen.io/Mefik/pen/OomQmY :)

1 odpowiedź

odpowiedź 3 września 2018 przez pablop76 VIP (123,580 p.)
wybrane 3 września 2018 przez Meffy

Najlepsza

Użyj figure i figcaption

komentarz 3 września 2018 przez Meffy Użytkownik (730 p.)

Próbowałem i nie wychodziło mi jakoś nie wiem, może coś zle robilem, Próbowałem również <span>

komentarz 3 września 2018 przez pablop76 VIP (123,580 p.)

<div class="gallery">
  <figure>
    <img src="https://yt3.ggpht.com/a-/ACSszfHCDJtvrMUTMmXvrfFnq63Tv6m0JfzAyqZcyg=s900-mo-c-c0xffffffff-rj-k-no" alt="Elephant at sunset" />
    <figcaption>Pasja informatyki</figcaption>
</figure>
<figure>
    <img src="https://yt3.ggpht.com/a-/ACSszfHCDJtvrMUTMmXvrfFnq63Tv6m0JfzAyqZcyg=s900-mo-c-c0xffffffff-rj-k-no" alt="Elephant at sunset" />
    <figcaption>Pasja informatyki</figcaption>
</figure>
<figure>
    <img src="https://yt3.ggpht.com/a-/ACSszfHCDJtvrMUTMmXvrfFnq63Tv6m0JfzAyqZcyg=s900-mo-c-c0xffffffff-rj-k-no" alt="Elephant at sunset" />
    <figcaption>Pasja informatyki</figcaption>
</figure>
</div>

.gallery{
  display: flex;
}
figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    margin: 0;
    padding: 5px;
    width: 19em;
}

img {
    width: 100%;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}