Bilder nicht über die Spaltenanzahl verteilt

Ich ordne drei Bilder gleicher Größe innerhalb eines dreispaltigen Layouts an. Dies sollte zu drei Bildern in einer Reihe führen. Es funktioniert wie erwartet in IE11, Edge, FF, aber Chrome tut nicht was es sollte: Es zeigt Bild 1 + 2 in der ersten Spalte, Bild 3 ist in der zweiten Spalte. Was macht Chrome hier? Wenn ich dem enthaltenden Div eine feste Höhe von z.B. 120px die drei Bilder sind wie erwartet ausgerichtet, Seite an Seite.
Snippet:Bilder nicht über die Spaltenanzahl verteilt

.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>

Quelle

2017-10-02 Matschek

Try Anzeigeblock zum Bild hinzugefügt .columns img { Anzeige: Block; } –

img s sind inline Elemente standardmäßig so können Sie img {display: block;} geben, und es wird das Problem lösen:

.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>

Quelle

2017-10-02 15:45:10

Das ist sehr interessant, und ich kann nicht erklären, warum es so (andere als willkommen zu Cross-Browser-Entwicklung) verhält, sondern als eine schnelle Lösung kann ich sagen Sie, wenn Sie das CSS hinzufügen img {display: block} wird es funktionieren.

Quelle

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>

Quelle

2017-10-02 15:52:06 Pardeep

Bilder nicht über die Spaltenanzahl verteilt

Antwort

Verwandte Themen