Jak wyśrodkować 3 divy z calc.

Question

Witam.

Zrobiłem 3 divy po szerokości 33.33333333333333%, oraz z marginesem 10px, w calc od 33.33...odjąłem 60px.

Co zrobiłem złego, że nie są na środku ? Użyłem float: left !

Proszę o pomoc :(

Liczę również na pomoc  Comandeera :)

Answer 1

Odejmij w calcu 20px zamiast 60px

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.wrapper {
  width: 100%; height: 100px;
  background: tomato;
}
.box { 
  width: calc(33.33% - 20px); height: 30px;
  background: silver; 
  margin: 0 10px; 
  float: left;
}

 

Answer 2

Zastosuj flexbox, ułatwia życie.

A jak już tego calca chcesz użyć to spróbuj tak:

<div class="box">text</div>
<div class="box">text</div>
<div class="box">text</div>

.box{
  margin: 0 .6em;
  width: calc(33% - 1.2em);
  float:left;
  background-color: red;
}

 

Comments

Czy ten kurs zawiera aktualne wiadomości odnośnie flexboxa ?

https://www.youtube.com/watch?v=0vATUHnsq8g

---

http://flexboxfroggy.com/