[CSS] Count DIV en gebruiken in CSS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

G P

G P

26/08/2018 15:41:51
Quote Anchor link
Ik zou het aantal divs willen vermenigvuldigen met het aantal margin-top (2em)
Met div + div werkt het perfect zoals ik het wil, maar stel dat ik 100 divs ga hebben moet ik dan 100 keren div + div gaan gebruiken. Ik weet nooit op voorhand hoeveel divs er gaan zijn.
Met counter werkt het niet omdat het resultaat word terug geven in een string en niet in een variable.
Een andere oplossing is met style="--number: x;" waarbij x een getal is. Maar dit is een oplossing die niet het meest evident is.
Iemand enige suggesties?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Stack Cards</title>
<style type="text/css">
html,
body
{
    display: block;
    height: 100%;
    width: 100%;
    margin: 0 0 0 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0 0 0 0;
}

div.stack
{
    background: none #393;
    counter-reset: div; /* Reset counter */
    display: block;
    float: left;
    height: 100%;
    margin: 0 0 0 0;
    max-width: 20%;
    padding: 0 0 0 0;
    width: 20%;
}

div.card
{
    background: none #fff;
    border: solid 1px #000;
    border-radius: 0.3em;
    box-shadow: 0.2em 0.2em 0.5em #ccc;
    color: #000;
    display: block;
    height: 300px;
    line-height: 1em;
    margin: 0 0 0 0;
    padding: 0.2em 0.2em 0.2em 0.2em;
    position: absolute;
    width: 200px;
}

div.card::before
{
    content: counter(div);
}

div.card + div.card { margin-top: 2em; } /* Card 1 */
div.card + div.card + div.card { margin-top: 4em; } /* Card 2 */
div.card + div.card + div.card + div.card { margin-top: 6em; } /* Card 3 */
div.card + div.card + div.card + div.card + div.card { margin-top: 8em; } /* Card 4 */
div.card + div.card + div.card + div.card + div.card + div.card { margin-top: 10em; } /* Card 5 */
div.card + div.card + div.card + div.card + div.card + div.card + div.card { margin-top: 12em; } /* Card 6 */
div.card + div.card + div.card + div.card + div.card + div.card + div.card + div.card { margin-top: 14em; } /* Card 7 */

div.card + div.card
{
    counter-increment: div; /* Count cards in stack */
/*    margin-top: calc((var(--number) - 1) * 2em); /* Formula calculate --number * 2em top-margin */
/*    margin-top: calc(var(div) * 2em); /* Formula calculate divs * 2em top-margin */
}
</style>
</head>

<body>
<div class="stack">
    <div class="card" style="--number: 1;"></div>
    <div class="card" style="--number: 2;"></div>
    <div class="card" style="--number: 3;"></div>
    <div class="card" style="--number: 4;"></div>
    <div class="card" style="--number: 5;"></div>
    <div class="card" style="--number: 6;"></div>
    <div class="card" style="--number: 7;"></div>
</div>
<div class="stack">
    <div class="card" style="--number: div;"></div>
    <div class="card" style="--number: div;"></div>
    <div class="card" style="--number: div;"></div>
</div>
<div class="stack">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="stack">
    <div class="card"></div>
</div>
<div class="stack">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
</div>
</body>
</html>
 
PHP hulp

PHP hulp

29/03/2024 06:57:06
 
Rob Doemaarwat

Rob Doemaarwat

26/08/2018 15:48:46
Quote Anchor link
Moeten dit echte speelkaarten voorstellen die op een "stack" liggen (dus grotendeels overlappend)?

Eigenlijk moet je dan een parent element maken (met gewone block weergave) met een hoogte 2em, en in/aan die parent hang je dan "absolute" de complete kaart (die daar dus aan de onderkant een flink stuk overheen steekt). Dan schaalt het gewoon op naar net zoveel kaarten als je wilt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
CSS:

div.stack{
  display: inline-block;
  width: 200px;
}
div.card{
  position: relative;
  height: 2em;
}
div.card > div{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 300px;
  border: 1px solid red;
  background: #fff;
}

HTML:

<div class="stack">
    <div class="card"><div>kaart 1<br>kaart 1<br>kaart 1<br>kaart 1<br>kaart 1</div></div>
    <div class="card"><div>kaart 2<br>kaart 2<br>kaart 2<br>kaart 2<br>kaart 2</div></div>
    <div class="card"><div>enz</div></div>
    <div class="card"><div></div></div>
    <div class="card"><div></div></div>
    <div class="card"><div></div></div>
    <div class="card"><div></div></div>
</div>
Gewijzigd op 26/08/2018 15:54:29 door Rob Doemaarwat
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.