Outils du site

pratique:informatique:pinterest

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
pratique:informatique:pinterest [29/03/2018 12:48]
Lyz Lach'lan [Alternative via Dokuwiki]
pratique:informatique:pinterest [30/03/2018 15:31] (Version actuelle)
Lyz Lach'lan [Se refaire le tableau en web]
Ligne 36: Ligne 36:
     margin:0;     margin:0;
  
-} 
- 
-.tableau { 
-    display:​flex;​ 
-    flex-flow:​row wrap; 
-} 
- 
-.tableau ul { 
-    column-count:​6;​ 
-    list-style-type:​ none; 
 } }
  
 .thumb { .thumb {
-margin:1em; 
 max-width:​100%;​ max-width:​100%;​
 display:​block;​ display:​block;​
 height:​auto;​ 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>​ </​code>​
Ligne 74: Ligne 78:
        ?>        ?>
  
- +<div class="​masonry">​ 
- +<div>
-<div class="​tableau">​ +
-<ul>+
     <?php // Liste et affiche les images     <?php // Liste et affiche les images
     foreach($files as $image) { $f= str_replace($repertoire,'',​$image);​ ?>     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 } ?>     <?php } ?>
     ​     ​
-</ul> 
 </​div>​ </​div>​
 +</​div>​
 +
  
 </​body>​ </​body>​
pratique/informatique/pinterest.txt · Dernière modification: 30/03/2018 15:31 par Lyz Lach'lan