ul 내에서 절대 위치 자식 div 사용

현재 div로 절대 위치 된 div와 함께 column-count을 사용하는 데 문제가 있습니다. 부정적인 top를 사용하는 경우ul 내에서 절대 위치 자식 div 사용

는

ul { 
 
    column-count: 3; 
 
    margin-top: 50px; 
 
} 
 
ul > li { 
 
    position: relative; 
 
    height: 300px; 
 
    list-style: none; 
 
} 
 
ul > li > .child { 
 
    position: absolute; 
 
    top: -20px; 
 
}

<ul> 
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
</ul>

,이 주위에 얻을 수 어쨌든이 이전 열을 포장하는 것?

나는 width: 33%을 사용할 수 있지만, 열의 양에 따라 달라 지겠지만, 어쨌든 column-count을 사용하여이 작업을 수행 할 예정입니까?

출처

2017-09-07 Ian

는 대신 긍정적'bottom'를 시도 그 일을하기 위해 추가? – Tijmen

@Tijmen을 사용하지 않으려 고 시도하면 어린이가 열의 맨 위에 올 때마다 자동 줄 바꿈을하는 것처럼 보입니다. 그것이 그렇게 할 것이라는 것이 이상하게 보입니다. – Ian

@Ian이 아래에 귀하의 답변을 게시했습니다. –

그냥 -webkit-transform: translate3d(0, 0, 0); -webkit-column-break-inside: avoid;이

ul { 
 
    column-count: 3; 
 
    margin-top: 50px; 
 
} 
 
ul > li { 
 
    position: relative; 
 
    height: 300px; 
 
    list-style: none; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -webkit-column-break-inside: avoid; 
 
} 
 
ul > li > .child { 
 
    position: absolute; 
 
    top: -20px; 
 
}

<ul> 
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
    
 
    <li> 
 
    <div class="child">Positioned Absolute</div> 
 
    Just some extra content 
 
    </li> 
 
</ul>

출처

2017-09-07 12:31:02

완벽하게 작동하며, 대부분 캐니 엄을 지원하는 것으로 보입니다. Column-break-inside의 문서를 정확히 어떻게 찾았습니까? – Ian

나는 그저'열 카운트 포지션 상대 이슈 '라고 대답했고 대답을 얻었다. –

어그, 나는 상대적으로 끈적 거리는 문제를 생각하지 않았다. 감사! – Ian

ul 내에서 절대 위치 자식 div 사용

답변

관련 문제