인라인 블록을 사용하여 별도의 상위 Div 내에서 하위 Div를 나란히 정렬하는 방법은 무엇입니까?

중첩되지 않은 상위 ​​Div 내에서 하위 Div를 나란히 정렬하는 방법

두 개의 div가 나란히 있습니다. 자신의 상위 div. 이러한 상위 div는 여러 번 반복됩니다. child_div_1과 child_div_2의 각 쌍을 서로 수평으로 나란히 배치하려고 합니다.

이를 달성하려면 display:inline-block; 하위 div의 스타일 속성입니다. 이 속성을 사용하면 콘텐츠의 일반적인 흐름을 방해하지 않고 div를 인라인 요소로 정렬할 수 있습니다. div는 서로 나란히 표시되지만 상태는 블록 요소로 유지됩니다.

이 방법은 부동 소수점을 사용하는 것에 비해 원하는 레이아웃을 얻는 더 간단한 방법을 제공합니다. 다음은 수정된 HTML 및 CSS의 예입니다.

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1' style="display:inline-block;"></div>
  <div class='child_div_2' style="display:inline-block;"></div>
</div></code>

<code class="css">.child_div_1, .child_div_2 {
  display:inline-block;
}</code>

자세한 지침은 다음 튜토리얼을 참조하세요: http://learnlayout.com/inline-block.html

위 내용은 인라인 블록을 사용하여 별도의 상위 Div 내에서 하위 Div를 나란히 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!