Pozycjonowanie trzech divów w css

pytanie zadane 25 maja 2022 w HTML i CSS przez AnimPony Początkujący (440 p.)

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

2 odpowiedzi

odpowiedź 25 maja 2022 przez VBService Ekspert (252,660 p.)
wybrane 25 maja 2022 przez AnimPony

Najlepsza

To ja zaproponuje za pomocą grid-a, np. tak:

<!doctype html>
<html>
  <head>
    <title>strona</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <div class="gora"></div>
    <div class="srodek-kontener">
      <div class="lewy"></div>
      <div class="srodek"></div>
      <div class="prawy"></div>
    </div>
    <div class="dol"></div> 

  </body>

</html>

.gora,
.srodek-kontener,
.dol {
  width: 500px;
  height: 100px;    
}

.gora {
  background-color: black;
}

.srodek-kontener {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

.lewy,
.srodek,
.prawy {
  width: 100px;
  height: 100%; /* 100px; */ 
}

.lewy {
  background-color: aqua;
  justify-self: start;
}
.srodek {
  background-color: blueviolet;
  justify-self: center;
}
.prawy {
  background-color: chocolate;
  justify-self: end;
}

.dol {
  background-color: yellow;
}

komentarz 25 maja 2022 przez AnimPony Początkujący (440 p.)

Ten sposób działa, ale szkoda, że jest taki sztywny, np. nie mogę do niego dodać margin: 10px; bo wszystko się rozwala

komentarz 25 maja 2022 przez VBService Ekspert (252,660 p.)

Podaj, proszę, w którym miejscu kodu chcesz dodać margin: 10px;

komentarz 25 maja 2022 przez AnimPony Początkujący (440 p.)

.lewy,
.srodek,
.prawy {
  width: 100px;
  height: 100%; /* 100px; */
}

tak, aby każdy z tych trzech divów miał 10 pikselowy marginez

komentarz 25 maja 2022 przez VBService Ekspert (252,660 p.)
edycja 25 maja 2022 przez VBService

Czy o taki margines, Tobie chodzi?

.lewy,
.srodek,
.prawy {
  width: 100px;
  height: 80%; /* 80px; */
  margin: 10px;
}

komentarz 25 maja 2022 przez VBService Ekspert (252,660 p.)

Czy o taki?


.lewy,
.srodek,
.prawy {
  width: 100px;
  height: 80%; /* 80px; */
  margin: 10px;
}
  
.lewy {
  background-color: aqua;
  justify-self: start;
  margin-left: 0;
}
.srodek {
  background-color: blueviolet;
  justify-self: center;
}
.prawy {
  background-color: chocolate;
  justify-self: end;
  margin-right: 0;
}

odpowiedź 25 maja 2022 przez wizarddos Nałogowiec (25,930 p.)

Możesz to zrobić za pomocą flexboxa zamiast używać przestarzałego float:left;

wtedy dodajesz do elementu z flexboxem w stylach

justify-content: space-around;

więcej

1	komentarz 25 maja 2022 przez VBService Ekspert (252,660 p.) edycja 25 maja 2022 przez VBService IMO, patrząc na obrazek drugi to chyba bardziej justify-content: space-between;

komentarz 25 maja 2022 przez AnimPony Początkujący (440 p.)

dodałem taki zapis, ale nic to nie zmienia u mnie

komentarz 25 maja 2022 przez VBService Ekspert (252,660 p.)

A jak zapisałeś w css-ie?

<!doctype html>
<html>
  <head>
    <title>strona</title>
    <link rel="stylesheet" href="style.css">
  </head>
 
  <body>
 
    <div class="gora"></div>
    <div class="srodek-kontener">
      <div class="lewy"></div>
      <div class="srodek"></div>
      <div class="prawy"></div>
    </div>
    <div class="dol"></div> 
 
  </body>
 
</html>

.gora,
.srodek-kontener,
.dol {
  width: 500px;
  height: 100px;    
}
 
.gora {
  background-color: black;
}
 
.srodek-kontener {
  display: flex;
  justify-content: space-between;
}
 
.lewy,
.srodek,
.prawy {
  width: 100px;
  height: 100%; /* 100px; */
}
 
.lewy {
  background-color: aqua;
}
.srodek {
  background-color: blueviolet;
}
.prawy {
  background-color: chocolate;
}
 
.dol {
  background-color: yellow;
}