列数に画像が広がっていない

3列のレイアウトで同じサイズの画像を3つ並べています。これは3つのイメージを連続して表示するはずです。これはIE11、Edge、FFでは期待通りに動作しますが、Chromeはそれが必要ではありません。最初の列に画像1 + 2、2番目の列に画像3が表示されます。ここでChromeの役割は何ですか？私が含有するdivに固定された高さを与えた場合、 120pxの3つの画像は、並んで期待どおりに整列されます。
スニペット：列数に画像が広がっていない

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

出典

2017-10-02 Matschek

てみてください{ 表示：ブロック; } –

img sが、デフォルトでinline要素です：画像に .columns IMGを表示ブロックを追加する

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

出典

2017-10-02 15:45:10

非常に興味深いです、それは（クロスブラウザの開発を歓迎する以外の）そのように動作しますなぜ私が説明することはできませんが、私はできる簡単な修正などあなたがCSS img {display: block}を追加すればそれがうまくいくかどうか教えてください。あなたがimg {display: block;}を与えることができ、それが問題を解決するよう

出典

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>

出典

2017-10-02 15:52:06 Pardeep

列数に画像が広がっていない

答えて

関連する問題