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

Programowanie webowe | 02. float left vs. display inline-block, zadanie do samodzielnego wykonania

VPS Starter Arubacloud
0 głosów
292 wizyt
pytanie zadane 2 marca 2019 w HTML i CSS przez szybki_lopez Nowicjusz (150 p.)

Witam,

Rozwiązując zadanie z ustawianiem divów za pomocą metody float left wszystko wyszlo mi wporządku.

Jednak używając metody inline block mam problem z umiejscowieniem 3 divów w środku innego. Kiedy ten div jest bez dodatkowych  divów w środku, znajduje sie w odpowiednim miejscu, lecz jeśli wrzucę do środka te 3 dodatkowe, opada razem z nimi o 100px. 

HTML
<body>
	<div class="container">
		<div class="logo"></div>
		<div class="menu"></div>
		<div class="menu2"></div>
		<div class="nav">
		<div class="nav1"></div>
		<div class="nav2"></div>
		<div class="nav3"></div>
		</div>
		<div class="content"></div>
		<div class="sidebar"></div>
		<div class="footer"></div>
		
			</div>
</body>

CSS
.container
{
	background-color: white;
	width: 800px;
	height: 600px;
	margin: auto;
	font-size: 0;
	
}
.logo
{
	background-color: gray;
	width: 800px;
	height: 100px;
}
.menu
{
	background-color: black;
	width: 600px;
	height: 100px;
	display: inline-block;
}
.menu2
{
	background-color: coral;
	width: 200px;
	height: 100px;
	display: inline-block;
	
}
.nav
{
	background-color: pink;
	width: 600px;
	height: 200px;
	display: inline-block;
	
	
}
.nav1
{
	background-color: brown;
	width: 300px;
	height: 100px;
	display: inline-block;
	
}.nav2
{
	background-color: green;
	width: 300px;
	height: 100px;
	display: inline-block;
	
}.nav3
{
	background-color: gold;
	width: 600px;
	height: 100px;
	
	
}
.content
{
	background-color: skyblue;
	width: 200px;
	height: 200px;
	display: inline-block;
	
}
.sidebar
{
	background-color: teal;
	width: 800px;
	height: 100px;

Tak to wygląda po wyswwietleniu a powinno tak jak ponizej.

Byłbym wdzieczny za jakieś sugestie. Pozdrawiam.

1 odpowiedź

+1 głos
odpowiedź 4 marca 2019 przez shotokan Nałogowiec (39,660 p.)
wybrane 4 marca 2019 przez szybki_lopez
 
Najlepsza
Podpowiem, że brakuje Ci display: inline-block w .nav3
komentarz 4 marca 2019 przez szybki_lopez Nowicjusz (150 p.)
Dziękuję bardzo, byłem przekonany że skoro ten div zajmuje całą szerokość wcześniejszego to nie ptrzebuje inline-blocka, jednak okazuje się że byłem w błędzie.

Podobne pytania

0 głosów
1 odpowiedź 228 wizyt
0 głosów
3 odpowiedzi 445 wizyt
pytanie zadane 2 sierpnia 2020 w HTML i CSS przez niezalogowany
0 głosów
3 odpowiedzi 970 wizyt

93,081 zapytań

142,045 odpowiedzi

321,464 komentarzy

62,427 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 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...