• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pozycjonowanie elementów w CSS

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,343 wizyt
pytanie zadane 6 stycznia 2018 w HTML i CSS przez sosick Nowicjusz (160 p.)

Cześć,

uczę się podstaw HTML i CSS. Napotkałem na problem z którym nie potrafię sobie poradzić. Mam zadanie, aby ustawić elementy identycznie jak na poniższym obrazku:

 

 

 

 

W pierwszym wierszu mają być dwa elementy div, w drugim dwa paragrafy.

Mój kod wygląda następująco, HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task 8</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="left">Div 1.</div>
    <div class="right">Div 2.</div>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
</body>
</html>

i CSS:

.left {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
p {
    display: inline-block;
    width: 80px;
    border: 2px dotted red;
}

Jednak cały czas (a próbowałem już kilku rozwiązań) wychodzi mi coś takiego:

Czyli paragrafy znajdują się pomiędzy divami. A nie pod nimi. Nie wiem co zrobić, aby kod wyglądał jak na pierwszym zdjęciu. Z góry dziękuję za pomoc!

3 odpowiedzi

+1 głos
odpowiedź 6 stycznia 2018 przez PaulGilbert Gaduła (3,280 p.)
Dodaj pustego diva po tamtych ze stylem clear:both i wszystko się ustawi tak jak chcesz.
komentarz 6 stycznia 2018 przez sosick Nowicjusz (160 p.)
Dziękuję bardzo, wszystko jest tak jak powinno. :)
komentarz 6 stycznia 2018 przez Shaoi Mądrala (7,020 p.)

Dodaj pustego diva po tamtych ze stylem clear:both i wszystko się ustawi tak jak chcesz.

Nie, tak się tego nie robi. Pusty tag to najgorsze rozwiązanie tego problemu.

komentarz 6 stycznia 2018 przez PaulGilbert Gaduła (3,280 p.)
Można w niego wpakować dwa paragrafy, żeby nikt nie marudził.
0 głosów
odpowiedź 6 stycznia 2018 przez imklau Nałogowiec (42,090 p.)

proszę: http://www.kurshtml.edu.pl/css/przyleganie,pozycjonowanie.html

Wyciągnij wnioski z tego i powinno Ci się udać to ogarnąć ;)

0 głosów
odpowiedź 6 stycznia 2018 przez bulgotnik86 Gaduła (3,040 p.)
A ja Ci tak poradze to zrobić:

Stwórz diva na np 100% szerokości rodzica , nazwij go np. id="wrapper" i zamknij w nim div class=left i div class=right. W ten sposób oddzielisz od siebie sekcje diwów i paragrafów. W ogóle stronę warto dzielić na sekcje bo potem przy tworzeniu wersji mobilnej jest to wszystko dużo łatwiej ogarnąć. Porządek!!!

Tera css:

#wrapper{

position:relative;

}

.left{

position:absolute;

top:20px;

left:0;

}

.right{

position:absolute;

top:20px;

right:0;

}

 

Zapamiętaj sobie ten układ: rodzic pozycja relatywna , dzieci -pozycja absolutna względem rodzica. Pozdrawiam Cię
komentarz 6 stycznia 2018 przez imklau Nałogowiec (42,090 p.)
kod trzeba było rzucić w bloczek ;)

Podobne pytania

0 głosów
2 odpowiedzi 280 wizyt
pytanie zadane 6 lutego 2018 w HTML i CSS przez pebrzosky Obywatel (1,160 p.)
0 głosów
1 odpowiedź 271 wizyt
pytanie zadane 26 listopada 2017 w HTML i CSS przez matir85 Bywalec (2,410 p.)
0 głosów
1 odpowiedź 179 wizyt

93,164 zapytań

142,176 odpowiedzi

321,938 komentarzy

62,492 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 688p. - dia-Chann
  2. 676p. - CC PL
  3. 675p. - Łukasz Piwowar
  4. 664p. - Marcin Putra
  5. 662p. - Łukasz Eckert
  6. 649p. - Michal Drewniak
  7. 641p. - rafalszastok
  8. 641p. - rucin93
  9. 629p. - Piotr Aleksandrowicz
  10. 621p. - Dawid128
  11. 602p. - Michał Telesz
  12. 597p. - Hubert Chęciński
  13. 572p. - ssynowiec
  14. 500p. - TheLukaszNs
  15. 437p. - nidomika
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...