• 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;)

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,317 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 528 wizyt
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 482 wizyt
pytanie zadane 12 lutego 2023 w HTML i CSS przez koderro Nowicjusz (120 p.)

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!

...