| Autor | Zpráva | ||
|---|---|---|---|
| Freak Profil * |
#1 · Zasláno: 30. 11. 2018, 21:43:03
Zdravím,
přemejšlím aktuálně nad variantou, jak vyřešit způsob, kdy mám vedle sebe 16x <div>, resp. mám jich 8 na jednom řádku a 8 na druhém řádku. A řeším věc, kdy chci aby každý druhý div byl šedý, ale na druhém řádku, aby to vypadalo dobře, tak byl první div šedý a následně každý druhý. Tzn. nějak takto: ibb.co/j8TjYgT Děkuji moc za radu |
||
| Keeehi Profil |
#2 · Zasláno: 30. 11. 2018, 22:24:39
Freak:
Tak těm co chceš aby byly šedé přidej nějakou třídu. Kde je problém? |
||
| Freak Profil * |
#3 · Zasláno: 30. 11. 2018, 22:58:16
Keeehi:
No a jak v tu chvíli řešit responzivitu? |
||
| DarkMeni Profil |
To responzivitu neovlivní. Nebo záleží jak je to řešené teď.
Případně existují pseudo-třídy :nth-child nebo :nth-of-type, ale zatím asi nebudou mít moc dobrou podporu, v nejnovějších Firefoxech a Chromech by to mohlo fungovat. .kontejner:nth-child(odd) { background: ... }
/* nebo */
.kontejner:nth-child(2n) { background: ... }
/* nebo liché */
.kontejner:nth-child(2n+1) { background: ... }Něco takového <!DOCTYPE HTML>
<html>
<head>
<title>nth-of-type</title>
</head>
<body>
<style type="text/css">
.row div { width:100px; height:100px; display:inline-block; }
.row:nth-of-type(2n) div:nth-of-type(2n+1) {background: Gray;}
.row:nth-of-type(2n+1) div:nth-of-type(2n) {background: Gray;}
</style>
<div class="row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>A pro responzivitu je lze dát všechny do 1 kontejneru s šířkou třeba 90% (odstranit řádky), čtvercům nastavit display:inline-block nebo float:left a řádky si to vytvoří samo. A pak i ten selektor může být mnohem jednodušší, prostě vybarvit každý lichý nebo sudý čtverec. |
||
| Keeehi Profil |
#5 · Zasláno: 30. 11. 2018, 23:41:19
„No a jak v tu chvíli řešit responzivitu?“
To přece záleží na zvoleném řešení responzivity. Ale obecně platí že bude někde nějaký breakpoint při kterém se ty dlaždice přeskládají. Při té příležitosti se mohou i přebarvit. Některé dlaždice budou mít více tříd a z těchto tříd budou aktivní jen některé při určitých breakpointech. |
||
| Kajman Profil |
#6 · Zasláno: 1. 12. 2018, 07:36:15
Když se bude dávat na řádek vždy lichý počet, tak to vyjde i při obyčejném střídání lichá - sudá.
|
||
| Mlocik97m Profil * |
#7 · Zasláno: 1. 12. 2018, 08:56:16
DarkMeni:
podpora je v pohode,... vid caniuse |
||
|
Časová prodleva: 5 let
|
|||
0