Images non étalées sur le nombre de colonnes

Je suis en train d'aligner trois images de taille égale dans une disposition à trois colonnes. Cela devrait conduire à trois images d'affilée. Il fonctionne comme prévu dans IE11, Edge, FF, mais Chrome ne fait pas ce qu'il devrait: Il montre l'image 1 + 2 dans la première colonne, l'image 3 est dans la deuxième colonne. Que fait Chrome ici? Si je donne à la div contenant une hauteur fixe de par ex. 120px les trois images sont alignées comme prévu, côte à côte.
Snippet:Images non étalées sur le nombre de colonnes

.columns { 
 
    column-count: 3; \t 
 
\t column-gap: 20px; 
 
    outline: 1px dashed blue; 
 
    width: 640px 
 
}

<div class="columns"> 
 
    <img src="http://via.placeholder.com/200x100" > 
 
    <img src="http://via.placeholder.com/200x100/a00" > 
 
    <img src="http://via.placeholder.com/200x100/00a" > 
 
</div> 
 

 
<div class="columns"> 
 
    Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
 
</div>

Source

2017-10-02 Matschek

Essayez d'ajouter le bloc d'affichage à l'image .Columns img { affichage: bloc; } –

img s sont inline éléments par défaut, vous pouvez donc donner img {display: block;} et il va résoudre le problème:

.columns { 
 
    column-count: 3; \t 
 
\t column-gap: 20px; 
 
    outline: 1px dashed blue; 
 
    width: 640px; 
 
} 
 

 
img { 
 
    display: block; 
 
}

<div class="columns"> 
 
    <img src="http://via.placeholder.com/200x100" > 
 
    <img src="http://via.placeholder.com/200x100/a00" > 
 
    <img src="http://via.placeholder.com/200x100/00a" > 
 
</div> 
 

 
<div class="columns"> 
 
    Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
 
</div>

Source

2017-10-02 15:45:10

qui est très intéressant, et je ne peux pas expliquer pourquoi il se comporte de cette façon (autre que bienvenue au développement du navigateur croix), mais comme une solution rapide je peux vous dire si vous ajoutez le CSS img {display: block} cela fonctionnera.

Source

2017-10-02 15:45:02 sn3ll

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .columns { 
     column-count: 3;  
     column-gap: 20px; 
     outline: 1px dashed blue; 
     width: 640px; 
     } 
     img { 
      display: block; 
     } 
    </style> 
</head> 
<body> 
<div class="columns"> 
    <img src="http://via.placeholder.com/200x100" > 
    <img src="http://via.placeholder.com/200x100/a00" > 
    <img src="http://via.placeholder.com/200x100/00a" > 
</div> 
<br> 
<div class="columns"> 
    Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
</div> 
</body> 
</html>

Source

2017-10-02 15:52:06 Pardeep

Images non étalées sur le nombre de colonnes

Répondre

Questions connexes