Wpis z mikrobloga

Kolejny dzień z #webdevw30dni

Próbuję różnych sposobów ustalania pozycji divów. http://raks3.vot.pl/d6/ lub http://fiddle.jshell.net/xLyoohmr/

1. Sposób (na samej górze) divy dla inline-block: przy ustaleniu 25% jeden obrazek zjeżdża na dół więc ustaliłem 24%. Jak pozbyć się wertykalnej przerwy między obrazkami? Nie jest to ani margin ani padding.

2. Float: left - wygląda jak chciałem.

3. Flex z http://css-tricks.com/snippets/css/a-guide-to-flexbox/ tego poradnika. Ustalone na 24% powinno by 25%. Ten sam problem co przy pierwszej metodzie.

4. Position relative dla głównego diva i absolute dla 4 kolejnych (obrazki). Mam problem z ustaleniem ich szerokości. (owszem mogę podać w px, ale chciałem %).

- 1 obrazek absolute - bez przesunięcia od lewej nie mogę ustalić szerokości aby zajmował 1/4 diva.

- 2 obrazek absolute z przesunięciem w lewo o 25% nie mogę ustalić szerokości powinno być 33% (bo 1/3 diva, która zostaje wolna)

- 3 absolute z przesunięciem w lewo o 50% i szerokość obrazka 50% (bo połowa diva, która została)

- 4 absolute z przesunięciem w lewo o 75% i szerokość obrazka 100% (bo 1/4 diwa, która została)

Dziękuję za wszystkie rady! Macie jakieś pomysły na przyszłe zadania?

#webdev
  • 2
Nie jest to ani margin ani padding.


@raskepa: 1.Bo tam jest spacja pomiędzy nimi. Można to próbować obejść poprzez ustawienie .box-one{font-size0;}

3. flex używasz źle. To .flex powinien mieć {display:flex;} a nie .three

najlepiej używać float lub flex, absolute nie nadaje się do takich rzeczy.