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

float: left; nie działa w przypadku .class, jak poprawnie ułożyć divy w HTML? (za pomocą float: left;)

Object Storage Arubacloud
0 głosów
1,051 wizyt
pytanie zadane 1 lutego 2018 w HTML i CSS przez Pawolo122 Początkujący (330 p.)

Poniżej zamieszczam kod źródłowy w HTML oraz CSS. Chciałbym aby div "tile5" znajdował się obok reszty kafelków, a nie pod nimi. Należy zwrócić uwagę na klasę .square, z którą zdecydowanie jest coś nie tak. Dałem float: left; oraz clear: both; więc nie mam pojęcia o co chodzi. (Problem dotyczy odcinka kursu HTML odc. 3 Mirosława Zelenta https://www.youtube.com/watch?v=5y3Qc9Qs6TY&t=605s)

Poniżej zamieszczam wizualizację mojego problemu.

 

Jak strona wygląda:

Jak strona wygląda

 

 

Jak strona powinna wyglądać:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title>Jan Kowalski - Portfolio</title>
    
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
    
</head>

<body>
    
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
    
    <div id="container">
    
        <div class="rectangle">
                <div id="logo">Jan Kowalski</div>
                <div id="zegar">12:00:00</div>
                <div style="clear: both;"></div>
        </div>
    
        <div class="square">
            <div class="tile1">1</div>
            <div class="tile1">1</div>
            <div style="clear: both;">
        
            <div class="tile2">2</div>
            <div class="tile3">3</div>
            <div style="clear: both;">
            
            <div class="tile4">4</div>
        </div>
        
        
        <div class="square">
        
            <div class="tile5">5</div>
        </div>
        <div style=clear: both;></div>
        
        <div class="rectangle"></div>
        
    </div>
</body>
</html>

 

body
{
background-color:#303030;
color:#ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}

#container
{
    width:1000px;
    margin-right:auto;
    margin-left:auto;
}

.rectangle
{
    width:960px;
    margin:20px;
}

.square
{
    width: 50%;
    float: left;
}

#logo
{
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    width: 600px;
    text-align: left;
}

#zegar
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tile1
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #3095d3;
    float: left;

}

.tile2
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #666666;
    float: left;

}

.tile3
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #93c748;
    float: left;

}

.tile4
{
    margin: 10px;
    width: 480px;
    height: 142px;
    background-color: #ee5a32;
}

.tile5
{
    margin: 10px;
    width: 480px;
    height: 304px;
    background-color: #666666;
}
 

 

Z góry dziękuję za odpowiedź, pozdrawiam :)

komentarz 1 lutego 2018 przez imklau Nałogowiec (42,090 p.)

tak w razie jakbyś miał jeszcze kiedyś problem z kodem to wrzucaj kod w bloczki do tego przeznaczone - https://forum.pasja-informatyki.pl/faq#jak-wstawic-kod-zrodlowy ;)

1 odpowiedź

0 głosów
odpowiedź 1 lutego 2018 przez Kamil Maciantowicz Nowicjusz (160 p.)

Nie domknąłeś dwóch divów, tutaj poprawiony kawałek:

<div class="square"> 
            <div class="tile1">1</div> 
            <div class="tile1">1</div> 
            <div style="clear: both;"></div>
         
            <div class="tile2">2</div> 
            <div class="tile3">3</div> 
            <div style="clear: both;"></div>
             
            <div class="tile4">4</div> 
        </div>

 

Pozdrawiam :)

 

komentarz 1 lutego 2018 przez Pawolo122 Początkujący (330 p.)
Dzięki, taka drobnostka, a człowiek może nie zauważyć :)
komentarz 1 lutego 2018 przez Pawolo122 Początkujący (330 p.)

@Kamil Maciantowicz, Nie chcę być natrętny, ale dlaczego odległość pomiędzy kafelkami 2,  3, a 4 jest mniejsza niż powinna być, mimo że w kodzie nic o tym nie pisałem?

 

komentarz 1 lutego 2018 przez Kamil Maciantowicz Nowicjusz (160 p.)
Hmm, u mnie po zamknięciu obu divów jak na górze odległość się zgadzała, mógłbyś ponownie pokazać kod, w aktualnej wersji?
komentarz 1 lutego 2018 przez Pawolo122 Początkujący (330 p.)

Już sobie poradziłem :) Po prostu ustawiłem większy margines z góry, dziękuję za odpowiedź.

Podobne pytania

0 głosów
2 odpowiedzi 448 wizyt
0 głosów
1 odpowiedź 777 wizyt
pytanie zadane 22 września 2018 w HTML i CSS przez lach Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 285 wizyt
pytanie zadane 12 lutego 2023 w HTML i CSS przez koderro Nowicjusz (120 p.)

92,539 zapytań

141,380 odpowiedzi

319,463 komentarzy

61,926 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...