• 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

0 głosów
50 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,020 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 (59,760 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ź 98 wizyt
pytanie zadane 28 października 2017 w HTML i CSS przez PrzyszłyProgramista Nowicjusz (240 p.)
0 głosów
1 odpowiedź 90 wizyt
0 głosów
3 odpowiedzi 95 wizyt
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

53,002 zapytań

96,195 odpowiedzi

196,912 komentarzy

25,882 pasjonatów

Przeglądających: 59
Pasjonatów: 0 Gości: 59

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.

...