중첩 없이 Div를 나란히 표시하는 방법은 무엇입니까?

Div를 나란히 표시하기

가로로 인접해 표시되어야 하는 여러 div 요소를 처리할 때 특히 중첩되지 않은 경우 공통적인 문제가 발생합니다. 서로 안에. 이러한 경우 나란히 만드는 것이 까다로울 수 있습니다.

문제 설명:

다음 HTML 구조를 고려하세요.

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div></code>

목표는 child_div_1 및 child_div_2 요소의 각 쌍을 나란히 표시하는 것입니다.

해결책:

이를 달성하기 위해 "인라인 블록" 개념 작용합니다. 기본적으로 div 요소는 블록 요소입니다. 즉, 사용 가능한 전체 너비를 차지합니다. 그러나 표시 속성을 inline-block으로 설정하면 div는 블록 요소로 처리되면서 요소의 흐름을 방해하지 않고 인라인으로 렌더링할 수 있습니다.

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

이 수정을 통해 하위 div는 인라인으로 렌더링됩니다. , 전체 폭을 확장하지 않고 공간을 차지합니다. 이를 통해 해당 상위 div 내에서 나란히 표시될 수 있습니다.

위 내용은 중첩 없이 Div를 나란히 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!