다중 열 레이아웃이 동일한 높이

시피에서 시작하여, 두 번째 요소는 세 개의 다른 요소 35px보다 낮다. 그 이유는 각 요소에 margin-bottom: 35px;이 있다는 것입니다.하지만 맨 위에 왜 추가되어 있습니까? display: inline-block을 추가하면 두 번째 이후 열이 깨지는 것을 막을 수 있습니다.

어떻게 해결할 수 있습니까?

#items { 
 
    display: block; 
 
    column-width: 3rem; 
 
    column-gap: .35rem; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transition: all .25s ease-in-out; 
 
    transition: all .25s ease-in-out; 
 
} 
 
#items.show { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
#items .item { 
 
    width: 100%; 
 
    margin: 0 0 .35rem; 
 
    padding: 0; 
 
    display: inline-block; 
 
    column-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
}

<div class='show' id='items'> 
 
    <div class='item'></div> 
 
    <div class='item'></div> 
 
    <div class='item'></div> 
 
</div>

은 또한 난 단지 크롬에서이 문제를 가지고; Firefox와 Microsoft Edge는 정상적으로 작동합니다.

출처

2016-10-21 jonhue

디스플레이 : 인라인 블록, 여백 - 오른쪽 : -4px로 시도하십시오.

이

이다 알려진 디스플레이 인라인 블록 문제

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

출처

2016-10-21 15:18:37 joncodo

흠 ... 나는 그것 때문에 2 이후 중단 인라인 block' '와, 나를 위해 그런 경우가없는 것 같아요 아무것도 – jonhue

을 변경하지 않습니다 두 열을 완료 한 경우 두 번째 열에서 다시 시작하는 등의 작업을 수행합니다. 나는 이상한 일을 전에도 겪어 보지 못했습니다 ... – jonhue

덧붙여서, 저는이 문제가 크롬, 파이어 폭스와 엣지가 잘 작동합니다. – jonhue

다중 열 레이아웃이 동일한 높이

답변

관련 문제