"white-space:nowrap" 없이 div에 float:left 강제 적용

Question

다음과 같은 것이 있습니다.

으아아아

"부동" div가 컨테이너를 넘치더라도 서로의 왼쪽에 부동하도록 하고 싶습니다.

floating div에 "float:left"를 사용해 보았지만 작동하지 않았습니다. 그들은 서로 쌓입니다.

그래서 플로트 요소에 "display:inline-block"을 사용하고 컨테이너에 "white-space:nowrap"을 사용하여 해결 방법을 찾았지만 제 경우에는 도움이 되지 않았습니다.

으아아아

사실 "white-space:nowrap"은 내 텍스트가 원래 의도였던 부동 div의 imgs를 래핑하는 것을 방지합니다. "white-space:nowrap"은 예상된 작업을 수행하므로 이 트릭은 사람들이 div 내부의 콘텐츠 래핑에 관심이 없는 경우에만 작동하는 것 같습니다. 하지만 이번 경우에는 그랬습니다.

요약하자면, 공백 속성을 남겨두면 2개의 div가 원하는 대로 떠있지만 그 안의 콘텐츠는 엉망이 됩니다. 해당 속성을 사용하지 않으면 div 내부의 콘텐츠는 유지되지만 div는 부동되지 않습니다.

https://jsfiddle.net/8n0um9kz/

내가 원하는 것을 얻을 수 있는 해결책이 있나요?

감사합니다.

PS: 예제에서는 두 부동 div에 모두 66% 너비를 사용하여 그림으로 두 항목을 모두 볼 수 있습니다. 제가 아는 한, 물론 그것들은 모두 100%입니다.

Answer 1

네. 해결책이 있습니다.

컨테이너에 'display : flex' 및 'flex-wrap :wrap'을 사용하는 대신, 컨테이너에 'white-space : no-wrap'을 사용하면 항목이 컨테이너에 도달하면 다음으로 이동할 수 있습니다. 컨테이너의 끝 한 줄. 추가로 'justify-content : flex -start'를 사용하세요

Answer 2

그렇게 이해합니다.

으아아아

핵심은 컨테이너에서 "width" 및 "display:flex" 대신 "min-width"를 사용하는 것입니다.

플로트를 표시하고, 제거하고, 콘텐츠 크기를 조정하거나, 무엇이든 감싸거나 확장하기 위해 블록을 사용할 필요가 없습니다.

"align-items: flex-start"는 플로팅된 div가 해당 높이를 유지해야 하는 경우에만 필요합니다. 그렇지 않으면 가장 높은 div의 높이를 사용합니다. 플로팅 div에 컨테이너와 다른 배경색을 사용하지 않는 한 이는 문제가 되지 않습니다.

https://jsfiddle.net/b83rzL07/1/

감사합니다.