이미지가 열 개수에 걸쳐 분산되지 않습니다.

3 열 레이아웃 내에서 동일한 크기의 이미지 3 개를 정렬 중입니다. 연속해서 세 개의 이미지가 표시됩니다. IE11, Edge, FF에서 예상대로 작동하지만 Chrome은 다음과 같이해야합니다. 첫 번째 열에 이미지 1 + 2, 두 번째 열에 이미지 3이 표시됩니다. Chrome은 여기서 무엇을하고 있습니까? 포함 된 div에 고정 된 높이 (예 : 120px 세 이미지가 나란히 정렬됩니다.
발췌문 :이미지가 열 개수에 걸쳐 분산되지 않습니다.

.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를 .columns { 디스플레이 : 블록; } –

img의는 기본적으로 inline 요소입니다, 그래서 당신은 img {display: block;}을 줄 수 있으며이 문제를 해결할 수 :

.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}을 추가하면 알려줍니다.

출처

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

이미지가 열 개수에 걸쳐 분산되지 않습니다.

답변

관련 문제