PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

[CSS] Count DIV en gebruiken in CSS

Door G P op 26-08-2018 15:41
1.600 views
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?
<!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>
R
Rob Doemaarwat
26-08-2018 15:48 gewijzigd op 26-08-2018 15:54
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.


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>

Reageren

Inloggen om te reageren