두 개의 인라인 블록을 같은 줄에 왼쪽과 오른쪽으로 정렬
최신 웹 개발에서는 두 개의 인라인 블록 요소를 왼쪽과 오른쪽으로 정렬 같은 라인에서 겉으로는 복잡한 작업이 될 수 있습니다. 그러나 올바른 기술을 사용하면 접근 방식이 단순화될 수 있습니다.
Flexbox
Flexbox는 간단한 솔루션을 제공합니다. 상위 컨테이너에 display: flex 를 적용하고 하위 컨테이너에 justify-content: space-between을 적용하면 요소를 동일한 간격으로 컨테이너의 반대쪽 끝에 배치할 수 있습니다. 이는 다음과 같이 쉽게 구현할 수 있습니다.
<code class="css">.header { display: flex; justify-content: space-between; }</code>
Text-Align: Justify
대안 기술로는 상위 요소에서 text-align: justify를 활용하는 것이 있습니다. 그러나 이를 위해서는 이전 브라우저와의 호환성을 보장하기 위해 추가 해킹이 필요합니다.
<code class="css">.header { text-align: justify; /* IE 7 */ *width: 100%; *-ms-text-justify: distribute-all-lines; *text-justify: distribute-all-lines; } .header:after { content: ''; display: inline-block; width: 100%; height: 0; font-size: 0; line-height: 0; }</code>
:after 의사 요소로 추가 공간이 삽입되는 것을 방지하려면 다음 트릭을 사용할 수 있습니다.
<code class="css">.header { font-size: 0; } h1, .nav { font-size: 14px; }</code>
상위 요소의 글꼴 크기를 0으로 설정하고 하위 요소에 대해 재설정하면 문제가 해결될 수 있습니다.
위 내용은 같은 줄에서 두 개의 인라인 블록 요소를 왼쪽과 오른쪽으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!