Différences

Ci-dessous, les différences entre deux révisions de la page.

--- pratique:informatique:pinterest [29/03/2018 12:48] – [Alternative via Dokuwiki] Zatalyz
+++ pratique:informatique:pinterest [30/03/2018 15:31] – [Se refaire le tableau en web] Zatalyz
@@ Ligne 36: / Ligne 36: @@
     margin:0;
-}
-.tableau {
-    display:flex;
-    flex-flow:row wrap;
-}
-.tableau ul {
-    column-count:6;
-    list-style-type: none;
 }
 .thumb {
-margin:1em;
 max-width:100%;
 display:block;
 height:auto;
+}
+.masonry {
+    padding: 0;
+    column-gap: 0.1em;
+    font-size: .85em;
+	column-count: auto;
+	column-width: 200px;
+}
+.item {
+    display: inline-block;
+    padding: 0.5em;
 }
 </code>
@@ Ligne 74: / Ligne 78: @@
        ?>
+<div class="masonry">
+<div>
-<div class="tableau">
-<ul>
     <?php // Liste et affiche les images
     foreach($files as $image) { $f= str_replace($repertoire,'',$image); ?>
-       <li><img class="thumb" src="<?php echo $f; ?>" alt=""/></li>
+       <div class="item"><img class="thumb" src="<?php echo $f; ?>" alt=""/></div>
     <?php } ?>
-</ul>
 </div>
+</div>
 </body>