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

Dwa divy obok siebie, nie zajmujące 100% szerokości strony.

VPS Starter Arubacloud
0 głosów
802 wizyt
pytanie zadane 20 marca 2019 w HTML i CSS przez Fover3241 Nowicjusz (230 p.)

Hej, mam problem z wyśrodkowaniem dwóch divów, które mają zajmować 96% szerokości strony. (Nie mam problemu ze zrobieniem tego w momencie gdy zajmują one 100% szerokości np. 70%+30%) 

Pierwszy div ma szerokość 67.2%, a drugi 28.8%. Nie działa "margin: auto;", "margin- left/right;" również nie działa w żadnej konfiguracji.

Jedyne co wymyśliłem i działa to wsadzenie tych dwóch divów do osobnego diva o szerokości 96% i wtedy nadanie im pożądanych wartości szerokości i użycie "margin: auto;" w nowopowstałym divie. Jednak chciałbym tego uniknąc, gdyż mam wrażenie, że niepotrzebnie robi to zamieszanie w strukturze strony, później byłoby trudno się w tym połapać.

PS. Nie patrzcie na kolory divów i tło strony i ogólny wygląd, to na razie faza testów :D

HTML:

<!doctype HTML>
<html>
<head>

     <meta charset="utf-8">
     <title>Systemy</title>

     <meta name="description" content="Opis zawartości strony dla wyszukiwarek">
     <meta name="keywords" content="słowa, kluczowe, opisujące, zawartość">
     <meta name="author" content="Jan Programista">

     <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
     <link rel="stylesheet" href="style.css">
  
  </head>
  
  <body>
  <header>
	<h1> Title </h1>
  </header>
  
	<div id="tile1">
		<img src="">
		tile1
	</div>
	<div id="pojemniknateskurwysyny">
	<div id="tile2">
		<img src="">
		tile2
	</div>
	
	<div id="tile3">
		<img src="">
		tile3
	</div>
	</div>
	<div id="tile4">
		<img src="">
		tile4
	</div>
	
	<div id="tile5">
		<img src="">
		tile5
	</div>
	
	<div id="tile6">
		<img src="">
		tile6
	</div>
  </body>
</html>

CSS:


body
{
	background-image: url("prism.png");

}

header
{
	margin: 0 0 0 0;
	width:100%;
	height:50px;
	margin-bottom: 20px;
	text-align: center;
}

#tile1
{
	background-color:#002868;
	width:96%;
	margin:auto;
	height: 300px;
	border-radius: 5px 5px 5px 5px;
	
}

#tile2
{
	background-color: #045fef;
	width: 67.2%;
	height: 300px;
	float: left;
	border-radius: 5px 5px 5px 5px;
	
}

#tile3
{
	background-color: #f20448;
	width:28.8%;
	height: 300px;
	float:left;
	border-radius: 5px 5px 5px 5px;
	
}

#tile4
{
	background-color: #ef648c;
	width:28.8%;
	height: 300px;
	clear:both;
	float:left;
	border-radius: 5px 5px 5px 5px;
}

#tile5
{
	background-color:#48379b;
	width:67.2%;
	height: 300px;
	float:left;
	border-radius: 5px 5px 5px 5px;
	
}

#tile6
{
	background-color:#59e0c3;
	width:96%;
	height: 300px;
	clear:both;
	border-radius: 5px 5px 5px 5px;
	margin:auto;
}

 

2 odpowiedzi

0 głosów
odpowiedź 20 marca 2019 przez mrTobor Początkujący (480 p.)
wybrane 20 marca 2019 przez Fover3241
 
Najlepsza

Tak się dzieje bo nie masz w czym centrować tych divów. Ale nie centruj marginami. Użyj flexa.

display: flex;
justify-content: center;

dodaj to do swojego pojemnika i daj mu np. 100% width.

komentarz 20 marca 2019 przez Fover3241 Nowicjusz (230 p.)
display: flex

Ma być tylko w pojemiku, czy w każdym divie na stronie?

komentarz 20 marca 2019 przez mrTobor Początkujący (480 p.)

To zależy co chcesz sobie wyśrodkować. Jak tylko te dwa divy to dodaj w ich pojemniku flexa. Jak chcesz wyśrodkować ładnie wszystko na stronie bez marginów to dodaj w body: 

display: flex;
justify-content: center;
flex-wrap: wrap;

Spróbuj i zobacz co się stanie :)

Tylko wywal wtedy pojemnik

0 głosów
odpowiedź 20 marca 2019 przez Kamil Miler Początkujący (340 p.)
Dodaj te dwa divy do środka trzeciego diva i to tego diva wyśrodkujemy, nadaj mu następujące właściwości:

position:absolute

top:50%;

left:50%;

transform:translate(-50%,-50%);

Zobacz sobie gdzie umiejscowi diva bez transforma żeby zobaczyć co robi transform.

Nie znam jeszcze flexboxa i uwielbiam wyśrodkowywać metodą którą ci podałem

Podobne pytania

0 głosów
1 odpowiedź 856 wizyt
0 głosów
1 odpowiedź 1,020 wizyt
pytanie zadane 12 października 2018 w HTML i CSS przez fotoman Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 339 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...