두 개의 50% 너비 인라인 블록 요소가 다음 줄로 넘어가는 이유는 무엇입니까?

두 번째 줄로 넘어가는 50% 너비의 두 인라인 블록 요소

display:inline-block을 사용하여 너비가 50%인 두 개의 열을 만들려고 하면 다음과 같습니다. 요소의 전체 너비가 99%를 초과하면 두 번째 열이 다음 줄로 넘어가는 것을 관찰했습니다. 이 동작은 직관에 반하는 것처럼 보일 수 있습니다.

문제 이해

이 동작의 이유는 display:inline-block이 HTML의 공백과 상호 작용하는 방식에 있습니다. 줄바꿈, 탭, 공백과 같은 공백은 display:inline-block에 의해 축소됩니다. 즉, 인라인 블록 요소 사이에 공백이 있는 경우 단일 공백으로 처리되어 요소가 서로 옆에 효과적으로 배치됩니다.

인라인 블록 요소의 전체 너비가 100을 초과하는 경우 %, 공백을 수용할 남은 공간이 없습니다. 결과적으로 두 번째 열은 강제로 다음 줄로 넘어갑니다.

해결책: 공백 제거

이 문제를 해결하려면 인라인 블록 요소 사이의 공백을 제거해야 합니다. . 이는 다음 HTML 코드를 사용하여 달성할 수 있습니다.

<div>

공백 없이 div를 연결하면 display:inline-block 요소가 공백 없이 효과적으로 나란히 배치됩니다. 이렇게 하면 컨테이너 너비 내에서 올바르게 래핑됩니다.

이 조정을 통해 두 인라인 블록 요소는 50% 너비를 유지하며 총 너비가 100%를 초과하더라도 두 번째 줄로 래핑되지 않습니다. .

위 내용은 두 개의 50% 너비 인라인 블록 요소가 다음 줄로 넘어가는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!