Rozmieszczenie elementów w divie

Question

Hej, mam problem rozwiązuje sobie egzaminy i nie mogę zrobić stopki. Trzeba tam w divie umieścić jakiś odnośnik, tekst i zdjęcie mój problem polega na tym, że nie umiem rozmieścić tych elementów tak jak jest to na obrazku.
 

 

Kiedy dam <center>, to wtedy kwerendy, autor i obrazek są po środku stopki a nie jak tu rozciągnięte.

Answer 1

Witaj pokaż kod co do tej pory zrobiłem a będzie nam łatwiej stwierdzić z czym masz problem. Żeby zrobić taki layout można użyć float, inline-block, flex-a oraz grida. Napisz dokładnie z czym masz problem.

Comments

Chodzi mi wyłącznie o stopkę, w html mam tylko
 

<div id="stopka">test1 test2 test3</div>

Css:

#stopka
{
    background-color: #45517D;
    color: white;
    font-size: 150%;
    clear: both;
}

Nie mam pojęcia jak ustawić ten tekst z diva, żeby był jak na obrazku u góry.

Answer 2

Zapisałem, coś takiego:
 

        <div align="center" id="stopka">
            <p align="left">Kwerendy</p> 
             <p align="center">Autor</p> 
             <p align="right">Obrazek</p> 
        </div>

Problem jednak w tym, że każdy znacznik <p> przenosi mnie do nowej linii i tekst nie jest równy jak na obrazku a "leci po krzywej" :/

Answer 3

https://codepen.io/Jakub90/pen/MqQoda  - aktualizacja

 

Zrobiłem to na flexie. Jak czegoś nie rozumiesz to pytaj.

Comments

Trzy akapity w rzędzie to jak warstwy tortu obok siebie:)

---

teraz lepiej? ^^

---

Myślę, że bardziej chodziło o

justify-content: space-around;

---

Warto też dodać:

align-items: center; 

dzięki temu można wyrównać elementy wewnątrz elastycznego kontenera.

---

Dzięki za pomoc :)