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

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

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

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

.child_div_1, .child_div_2 {
  display:inline-block;
}

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