środkowanie divów

pytanie zadane 8 listopada 2016 w HTML i CSS przez anhydryt Początkujący (290 p.)

Witam,

Stworzyłem 9 divów, które chciałbym ułożyć na środku oddzielone od siebie w równej odległości. Te 9 divów zostało stworzonych w wyniku działania JS'a. Niestety nie wiem kompletnie jak je ulożyć na środku równo odległe. Dodam, że robię to tak gdyż będę później używał na tych divach zdarzenia z jQuery albo JS'a.

KOD HTML

<!DOCTYPE html>
<html>
	<head>
		<title> Gra </title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="game.js"></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
			  <div class="col-md-2">
				<h1> Wyniki </h1> 
				<p> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. </p>
			  </div>
			  <div class="col-md-8">
				<h1> Gra </h1>
				<div id="wynik">
					<h2> Rezultat </h2>
				</div>
				<div id="points">
					
					
				</div>
			</div>
			  <div class="col-md-2">
				<h1> Profil </h1> 
				<p> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. </p>
			  </div>
			</div>
		</div>
	</body>
</html>

KOD CSS

body {
	background-color: #ecf0f1;
	margin			: 2% 2%;
}

#wynik{
	border			: solid 1px blue;
}

.point {
	width			: 100px;
	height			: 100px;
	border			: solid 1px #000;
	border-radius	: 100%;
	text-align		: center;
	cursor			: pointer;
	float			: left;
	margin			: 2% 0 0 0;
	
}

KOD JS'a

function start(){
	var div_value = "";
	
	for (i = 0; i < 9; i++) 
		{
			div_value = div_value + '<div class="point"> A </div>';
			
			if((i+1)%3 == 0) 
			{
				div_value = div_value + '<div style="clear:both;"> </div>';
			} 
		}
	document.getElementById("points").innerHTML = div_value; 
	
	}

window.onload = start;

Dzięki z góry za pomoc :)

2 odpowiedzi

odpowiedź 8 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

odpowiedź 8 listopada 2016 przez Mlody89 Mądrala (6,920 p.)

Możesz nadać divowi #points odpowiedni wymiar width taki żeby w poziomie mieściły się trzy divy z klasą .point, oraz nadać mu margin: 0 auto

#points {
  width: 350px;
  margin: 100px auto;
}

Tak nawiasem mówiąc ucz się od początku dobrych praktyk i nie styluj po id

komentarz 8 listopada 2016 przez anhydryt Początkujący (290 p.)

Czyli stylowac po klasie? A jak mam np oddzielić poszczególne pointy czyli np jeden div od drugiego o kilka pikseli?

komentarz 8 listopada 2016 przez Mlody89 Mądrala (6,920 p.)
edycja 8 listopada 2016 przez Mlody89

Tak style css powinny stosować się tylko do klas. Id jest do pobierania elementu przez JS. Żeby oddalić punkty od siebie w klasie .point zmień margin na np. margin: 20px. Oczywiście później taki margin musisz uwzględnić w szerokości diva #points żeby ci się 3 punkty w lini mieściły.

Dla ułatwienia podpowiem ci bardzo przydatną funkcję css mianowicie :


width: calc(140px * 3);

 /*szerokość elementu (100px) i jego marginesów (margin: 20px) * 3 i masz 3 elementy w 1 lini*/

komentarz 8 listopada 2016 przez anhydryt Początkujący (290 p.)

Dzięki Ci serdecznie :)

Podobne pytania

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci