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

인라인 블록 요소 래핑: 너비 문제

각 열의 너비가 50%인 2열 레이아웃을 생성할 때 많은 사람들이 디스플레이의 경우: 플로트 관련 잠재적 문제를 방지하기 위한 인라인 블록 접근 방식입니다. 그러나 두 열 모두에 100% 너비를 사용하면 당황스러운 시나리오가 나타납니다. 두 번째 열은 두 번째 줄로 넘어가는 것 같습니다.

기본 원인

이 동작의 원인은 HTML이 디스플레이에서 공백 문자를 고려하는 데 있습니다. -차단하다. 공백 문자가 두 div 요소를 구분하면 브라우저는 이 공백을 추가 너비로 해석하여 두 번째 열이 줄바꿈됩니다.

해결책

이 문제를 해결하려면 , div 요소 사이의 공백 문자를 제거합니다. 이렇게 하면 추가 공간을 추가하지 않고도 결합된 너비를 정확하게 계산할 수 있습니다. 조정된 HTML은 다음과 같습니다.

<div>

이 간단한 수정으로 두 열은 이제 100% 너비를 차지하고 같은 줄에 나란히 남아 있습니다.

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