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

Div nie chce wskoczyć tam gdzie powinien

Aruba Cloud - Virtual Private Server VPS
0 głosów
323 wizyt
pytanie zadane 7 listopada 2018 w HTML i CSS przez rinausin Nowicjusz (150 p.)

Mam problem, a propo ukladania struktury divow, kwadracik na dole nie chce mi wskoczyć do struktury nie wiem dlaczego, załączam screena i kod HTML i CSS. Niestety nie mogę zauważyć błędu, a siedzę nad tym już chwilkę. Dzięki z góry za pomoc!

https://imgur.com/khwSbhT

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="box">
<div id="A">
</div>
<div id="B">
</div>
<div id="C">
</div>
<div id="D">
</div>
<div id="E">
</div>
<div id="F">
</div>
<div id="G">
</div>
<div id="H">
</div>
<div id="I">
</div>
<div class="czyscik"></div>
<div id="J">
</div>


</div>
</body>
</html>
#box
{
	height:400px;
	width:400px;
}
.czyscik
{
	clear:both;
}
#A
{
	height:25%;
	width:25%;
	background-color:yellow;
	float:left;
}

#B
{
	height:25%;
	width:25%;
	background-color:black;
	float:left;
}

#C
{
	height:25%;
	width:50%;
	background-color:green;
	float:left;
}

#D
{
	height:25%;
	width:50%;
	background-color:pink;
	float:left;
}

#E
{
	height:25%;
	width:25%;
	background-color:red;
	float:left;
}

#F
{
	height:25%;
	width:25%;
	background-color:blue;
	float:left;
}

#G
{
	height:25%;
	width:25%;
	background-color:magenta;
	float:left;
}

#H
{
	height:50%;
	width:50%;
	background-color:cyan;
	float:left;
}
#I
{
	height:50%;
	width:25%;
	background-color:black;
	float:left;
}

#J
{
	height:25%;
	width:25%;
	background-color:blue;
}

 

1 odpowiedź

+1 głos
odpowiedź 7 listopada 2018 przez Bosswell Nałogowiec (36,470 p.)
wybrane 7 listopada 2018 przez rinausin
 
Najlepsza

W css zmień stylowanie id G na

#G
{
    height:50%;
    width:25%;
    float:left;
}
#J
{
    height:50%;
    width:100%;
    background-color:blue;
    float: left
}

Dodaj element X

#X
{
    height:50%;
    width:100%;
    background-color:magenta;
    float: left
}

 

W HTML divy o id X i J umieść w divie o id G. i powinno śmigać. Po divie o id X możesz użyć "czyścika"

komentarz 7 listopada 2018 przez shotokan Nałogowiec (39,660 p.)
Sporo kodu się powtarza, np. height, width, float. Proponowałbym napisać ogólną klasę, a kolor zmieniać w tych id :)
komentarz 7 listopada 2018 przez Bosswell Nałogowiec (36,470 p.)
Oczywiście, masz rację ;) W odpowiedzi wskazałem jedynie jak by to zrobić sposobem, którego użył.

Podobne pytania

+1 głos
3 odpowiedzi 918 wizyt
pytanie zadane 11 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)
+1 głos
1 odpowiedź 114 wizyt
pytanie zadane 7 marca 2022 w PHP przez neo1020 Dyskutant (8,950 p.)
+2 głosów
1 odpowiedź 983 wizyt

93,331 zapytań

142,323 odpowiedzi

322,400 komentarzy

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

...