HTML i CSS - Ułożenie elementów w poście

pytanie zadane 23 maja 2018 w HTML i CSS przez 97kos Obywatel (1,390 p.)
zamknięte 23 maja 2018 przez 97kos

Cześć!

Jak wyrównać tekst i nagłówek w nowym poście, tak aby znalazły się w jednej linii ze zdjęciem?

Obecnie wygląda to tak (zdjęcie roboczo):

Obrazek 1

Docelowo ma wyglądać to mniej więcej tak (screen ze szkicu)

Zdjęcie 2

Kody zamieszczam poniżej (fragmenty)

<div class="post">
             <div class="post-image">
                     <img src="img/favicon.png" alt="Obrazek">
              </div>
              <div class="post-text">
                       <h2>#1 - Liczby i działania. Potęgowanie i pierwiastkowanie.</h2>
                        <p>Jak liczyć potęgi i pierwiastki? Dlaczego ich znajomość jest taka ważna? Najważniejsze wzory wraz z własnościami.</p>
               </div>
</div>

.post {
    text-align: justify;
    margin-top: 20px;
}

.post-image {
    display: inline-block;
}

.post-image img {
    width: 150px;
    height: 150px;
}

.post-text h2 {
    padding: -2px;
    font-size: 22px;
    font-style: italic;
}

.post-text {
    display: inline-block;
    margin-left: 10px;
    width: 790px;
    font-size: 22px;
}

komentarz zamknięcia: Problem rozwiązany, pomoc @pablop76 okazała się przydatna.

komentarz 23 maja 2018 przez pablop76 VIP (123,120 p.)

Ale możesz wrzucić tylko ten fragment odpowiedzialny za post.

komentarz 23 maja 2018 przez 97kos Obywatel (1,390 p.)

Właśnie zmieniłem, dziękuję za poradę

2 odpowiedzi

odpowiedź 23 maja 2018 przez pablop76 VIP (123,120 p.)
wybrane 23 maja 2018 przez 97kos

Najlepsza

To teraz zmień

.post-image {
    float: left;
}

i będzie git.

komentarz 23 maja 2018 przez 97kos Obywatel (1,390 p.)

Oczywiście także później:

clear: both;

komentarz 23 maja 2018 przez Wujek Greg Dyskutant (9,410 p.)

@pablop76, kto w dzisiejszych czasach używa floata do takich rozwiązań?

komentarz 23 maja 2018 przez pablop76 VIP (123,120 p.)

@97kos,
Bez clear: both; Tekst ma opływać obrazek.

komentarz 23 maja 2018 przez 97kos Obywatel (1,390 p.)

No ale później, gdy chcemy nowy post dodać?

komentarz 23 maja 2018 przez pablop76 VIP (123,120 p.)

Dodaj

.post::after {
    content: "";
    clear: both;
    display: table;
}

odpowiedź 23 maja 2018 przez Wujek Greg Dyskutant (9,410 p.)

Ciężko tak bez inspecta, ale możesz zrobić to:

- na tzw. "Janusza", czyli bierzesz zdjęcie, nadajesz position:relative, i manipulując wartością top: ustalasz na równo. Oczywiście to zadziała w przypadku gdy zdjęcie jak i tekst zawsze będą miały tą samą wysokość.

- możesz też bawić się marginesami i paddingami dla wrapa trzymającego zdjęcie(.post-image), ale to też nie jest ladne

- ostatecznie możesz też wycentrować obrazek w pionie, np. Nadajesz dla wrapa(.post-image) position:relative, a dla obrazka(img) position:absolute; top:50%; transform:translateY(-50%)

- W przypadku gdy opis będzie miał więcej lini to wycentrowanie w pionie może źle wyglądać, dlatego proponowałbym wyrównać to do tekstu umieszczonego w h2, a żeby to zrobić wystarczy że dodasz dla (.post-image) padding-top: odpowiadający marginesowi z h2