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

Float: left jak ustawić element blokowy na wysokości dwóch divów

Aruba Cloud - Virtual Private Server VPS
0 głosów
320 wizyt
pytanie zadane 26 czerwca 2018 w HTML i CSS przez DominikSkleroza Nowicjusz (120 p.)

Witajcie,

mam problem, by ustawić odpowiednio bloki. Przeryłem forum i znalazłem podobny temat, ale tam były niezamknięte divy. U mnie nie wiem, co nie działa, może źle kombinuję... Poniżej zrzut ekranu jak to wygląda i co chcę osiągnąć. Potrafię nawet przesunąć ten blok metodą float: right, ale nie mogę ustawić, żeby się pokrywał tak jak na obrazku (czerwone kontury kwadratu).

 

kod HTML

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>Strona o niczym</title>
    <meta name="description" content="Strona poświęcona samochodom">
    <meta name="keywords" content="opony, silniki, turbo, licznik">
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <link rel="stylesheet" href="main.css">
    <script src="code.js"></script>
</head>

<body>
    <div class="container">
        <div class="eraser"></div>
        <div class="logo"></div>
        <div class="nav"></div>
        <div class="navtwo"></div>
        <div class="menu">
            <div class="menuone"></div>
            <div class="menutwo"></div>
            <div class="eraser"></div>
            <div class="menutree"></div>
            <div class="eraser"></div>
            <div class="menufour"></div>
        </div>
    </div>
</body>

</html>

 

Oraz CSS

body {
    background-image: url(img/christmas-dark.png);
    margin: 0;
}

.container {
    width: 900px;
    height: 100px;
    margin: auto;
}

.logo {
    background-color: red;
    width: 900px;
    height: 100px;
}

.nav {
    background-color: blue;
    width: 600px;
    height: 100px;
    float: left;
}

.navtwo {
    background-color: green;
    width: 300px;
    height: 100px;
    float: left;
}

.eraser {
    clear: both;
}

.menu {
    width: 900px;
    height: 200px;
}

.menuone {
    background-color: yellow;
    width: 300px;
    height: 100px;
    float: left;
}

.menutwo {
    background-color: greenyellow;
    width: 300px;
    height: 100px;
    float: left;
}


.menutree {
    background-color: sienna;
    width: 600px;
    height: 100px;
}

.menufour {
    background-color: aquamarine;
    width: 300px;
    height: 200px;
    float: left;
}

 

2 odpowiedzi

0 głosów
odpowiedź 26 czerwca 2018 przez kenjiro244 Dyskutant (8,600 p.)

To czego szukasz to jest grid jak poznasz, np. z artykułu na css-trick to ustawianie elementów na stronie będzie najprostszą rzeczą jaką należy zrobić podczas tworzenia strony. Dlaczego grid jest fajny

0 głosów
odpowiedź 26 czerwca 2018 przez pablop76 VIP (123,540 p.)
Struktura html jest niepoprawna. Nie wystarczy w tym przypadku manipulować clear: both; Swoją drogą dlaczego jest jako pierwszy div w kontenerze? Należy dla elementów żółty, zielony, brązowy stworzyć osobny kontener i ustawić go jako float, a w nim znowu żółty i zielony jako float a brązowy jako czyszczący.

Wysokość dla .container 100px? Przecież zawarłeś w nim wdzystkie elementy. Ogłądam to na telefonie i mogę coś przekręcić bo mam słaby podgląd na cały kod.

Podobne pytania

0 głosów
1 odpowiedź 957 wizyt
pytanie zadane 22 września 2018 w HTML i CSS przez lach Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 1,006 wizyt

93,324 zapytań

142,323 odpowiedzi

322,389 komentarzy

62,653 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 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!

...