• 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,322 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 275 wizyt
pytanie zadane 6 lutego 2018 w HTML i CSS przez pebrzosky Obywatel (1,160 p.)
0 głosów
1 odpowiedź 261 wizyt
pytanie zadane 26 listopada 2017 w HTML i CSS przez matir85 Bywalec (2,410 p.)
0 głosów
1 odpowiedź 164 wizyt

93,089 zapytań

142,047 odpowiedzi

321,473 komentarzy

62,435 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...