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

Problem z float - małe marginesy

Konferencja JOIN! 2018
0 głosów
56 wizyt
pytanie zadane 11 lipca w HTML i CSS przez emanuel123 Nowicjusz (120 p.)

Cześć,
 

Dlaczego po stworzeniu poniższej strony odstępy(marginesy) pomiędzy div o klasie "title4" a "title5" jest mniejszy niż w przypadku innych div. Marginesy są ustawione prawidłowo. 

Dopiero po dodaniu "float:left" w klasie title5 marginesy robią się prawidłowe - nie rozumiem tego. Prośba o wytłumaczenie dlaczego tak jest, co robię źle

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

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <div id="container">  

        <div class="top">            
            <div id="logo">TESST</div>
            <div id="zegar">23:25:00</div>
            <div style="clear:both;"></div>            
        </div>
        
        <div class="square">    
            <div class="tile1">YT</div>
            <div class="tile2">FB</div>
            <div style="clear:both;"></div>
            <div class="tile3">FOTO</div>        
        </div>
        

        <div class="square">
            <div class="tile4">FB</div>
            <div class="tile5">Cytat</div>
        </div>

        <div style="clear:both;"></div>

    </div>

</body>
</html>
body
{
	background-color: #303030;
	color: #ffffff;
}

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

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

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

#logo
{
	float:	left;
	font-size:	70px;
	width: 600px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#zegar
{
	float:	left;
	font-size:	70px;
	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: #ff0000;
	float: left;
}

.tile3
{
	margin:10px;
	width: 480px;
	height: 480px;
	background-color: #000000;

}

.tile4
{

	margin:10px;
	width: 480px;
	height: 480px;
	background-color: #666666;
	

}

.tile5
{	
	clear:both;
	margin:10px;
	width: 480px;
	height: 142px;
	background-color: orange;

}

komentarz 11 lipca przez kenjiro244 Gaduła (4,960 p.)

Może nie jest to odpowiedź na pytanie ale wyobraź sobie że wpisujesz coś takiego:

"Tesst . Zegar Zegar"
"YT FB Fbszary Fbszary"
"Foto Foto Fbszary Fbszary"
"Foto Foto Fbszary Fbszary"
"Foto Foto Cytat Cytat"

I w taki sposób możesz dowolnie ustawić elementy na stronie, nie ważna jest kolejność ich w html dodatkowo nie potrzebujesz żadnych pojemników czy innych niepotrzebnych div-ów. Wszystko ładnie w jednym divie na całą stronę. Cały układ możesz zmienić od kolejności po wielkość konkretnych div-ów z grubsza w tych 5 linijkach. Wszystko dzięki Grid.

1 odpowiedź

0 głosów
odpowiedź 12 lipca przez pablop76 Maniak (70,940 p.)
Po title2 masz div czyszczący, a mogłbyś dodać clear do title3 bo przecież on nie jest float. Title5 ma clear: both; tylko po co? Nie ma tam nic float. A marginesy to kwestia policzenia w tym przypadku.

Podobne pytania

0 głosów
1 odpowiedź 106 wizyt
pytanie zadane 28 października 2017 w HTML i CSS przez PrzyszłyProgramista Nowicjusz (240 p.)
0 głosów
1 odpowiedź 98 wizyt
0 głosów
3 odpowiedzi 102 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

55,269 zapytań

99,579 odpowiedzi

204,902 komentarzy

27,241 pasjonatów

Przeglądających: 149
Pasjonatów: 2 Gości: 147

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...