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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilisation de multi-column layouts</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2059485">
<style>
html, body {
margin: 0;
padding: 0;
font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
margin: .25em 0;
color: #069;
}
main {
display: block;
margin: auto;
max-width: 60em;
}
header {
border-bottom: 2px solid #069;
}
p {
font-size: .9em;
margin: .5em 0;
}
.orange { background: #F70;}
.bleu { background: #08B;}
.vert { background: #0D0;}
.column-container {
counter-reset: countElement;
column-count: 4;
column-gap: .3em;
width: 40em;
margin: 1em auto;
border: 1px solid #069;
}
.column-container div::before {
content: counter(countElement) "-" attr(class);
counter-increment: countElement;
font-weight: bold;
}
.column-container div {
box-sizing: border-box;
margin: .15em 0;
display: block;
border: 1px solid transparent; /* stop fusion des marges */
}
label {
display: inline-block;
margin: .5em;
color: #999;
}
[type="radio"]:checked + label {
color: #069;
}
#inline-block:checked ~ div.column-container div {
display : inline-block;
}
#break-before:checked ~ div.column-container .break-before {
break-before: column; /* not FireFox */
}
#break-after:checked ~ div.column-container .break-after {
break-after: column; /* not FireFox */
}
</style>
</head>
<body>
<main>
<header>
<h1>Avec column-count:4</h1>
</header>
<nav>
<input id="flux-normal" type="radio" name="toggle" checked><label for="flux-normal">flux normal</label>
<input id="inline-block" type="radio" name="toggle"><label for="inline-block">display: inline-block</label>
<input id="break-before" type="radio" name="toggle"><label for="break-before">break-before:column</label>
<input id="break-after" type="radio" name="toggle"><label for="break-after">break-after:column</label>
<span id="size"></span>
<div class="column-container">
<div class="orange break-before">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bleu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
</div>
<div class="vert break-after">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
<p>Proin vulputate lectus sed consequat porta.
</div>
<div class="orange break-before">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
</div>
<div class="bleu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="vert break-after">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
</div>
<div class="orange break-before">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
<p>Proin vulputate lectus sed consequat porta.
</div>
<div class="bleu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
<p>Proin vulputate lectus sed consequat porta.
<p>Sed ut lectus imperdiet, venenatis libero eu, commodo neque.
</div>
<div class="vert break-after">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="orange break-before">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
</div>
<div class="bleu">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
<p>Proin vulputate lectus sed consequat porta.
</div>
<div class="vert break-after">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Phasellus faucibus ex non scelerisque volutpat.
<p>Proin vulputate lectus sed consequat porta.
<p>Sed ut lectus imperdiet, venenatis libero eu, commodo neque.
</div>
</div>
</nav>
</main>
<script>
const elem = document.querySelector(".column-container");
const spanSize = document.querySelector("#size");
const style = window.getComputedStyle(elem);
// juste pour provoquer un repaint
document.onclick = function () {
elem.style.display = style.display == "flow-root" ? "block" : "flow-root";
spanSize.textContent = "[" + style.height + "]";
};
elem.click();
</script>
</body>
</html> |
Partager