Witam,
chciałbym wypozycjonować 3 divy, w taki sposób, aby były oddalone od siebie o równą odległość, tak jak na drugim zdjęciu:
Mój kod:
<!doctype html>
<html>
<head>
<title>strona</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "gora"></div>
<div class = "lewy"></div>
<div class = "srodek"></div>
<div class = "prawy"></div>
<div style = "clear: both;"></div>
<div class = "dol"></div>
</body>
</html>
.gora {
width: 500px;
height: 100px;
background-color: black;
}
.lewy {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.srodek {
float: left;
width: 100px;
height: 100px;
background-color:blueviolet;
}
.prawy {
float: left;
width: 100px;
height: 100px;
background-color:chocolate;
}
.dol {
width: 500px;
height: 100px;
background-color: yellow;
}
Strona wygląda tak:
A chciałbym, żeby wyglądała tak (zrobione w paincie na szybko, dlatego troszkę krzywo):
Próbowałem zrobić to za pomocą margin: 0 auto; ale nie działa, zachowują się divy tak samo jak na pierwszym zdjęciu. Jak uzyskać taki efekt? Prosze o pomoc