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

Pozycjonowanie elementów w CSS

VPS Starter Arubacloud
0 głosów
1,074 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 232 wizyt
pytanie zadane 6 lutego 2018 w HTML i CSS przez pebrzosky Obywatel (1,160 p.)
0 głosów
1 odpowiedź 227 wizyt
pytanie zadane 26 listopada 2017 w HTML i CSS przez matir85 Bywalec (2,410 p.)
0 głosów
1 odpowiedź 129 wizyt

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...