CSS를 사용하여 하나의 고정 너비와 다른 하나의 남은 공간을 채우는 병렬 Div를 어떻게 얻을 수 있습니까?

CSS에서 Div를 나란히 배치하기

여러 div를 가로로 정렬하려고 할 때 원활하게 정렬해야 하는 문제가 발생할 수 있습니다. 이 기사에서는 CSS Flexbox를 활용하여 페이지 활용도를 극대화하는 최적의 레이아웃을 달성하는 솔루션을 제공합니다.

문제:

목표는 두 개의 div를 나란히 배치하는 것입니다. 한 div는 200px의 고정 너비를 유지하고 다른 div는 나머지 화면을 동적으로 채웁니다. space.

해결책:

이 레이아웃의 핵심은 유연한 항목 배열을 허용하는 강력한 CSS 속성인 flexbox입니다. 구현 방법은 다음과 같습니다.

1. 상위 div를 만들고 표시 속성을 flex로 설정합니다.

   #parent {
     display: flex;
   }

   로그인 후 복사

2. 고정 너비 div를 정의하고 해당 div를 지정합니다. 너비:

   #narrow {
     width: 200px;
     background: lightblue; /* Just for visibility */
   }

   로그인 후 복사

3. 다른 div에 flex: 1 추가:

   #wide {
     flex: 1; /* Grows to fill remaining space */
     background: lightgreen; /* Just for visibility */
   }

   로그인 후 복사

Flexbox를 활용하면 div가 나란히 배치되는 동적이고 유연한 레이아웃을 만들 수 있습니다. 사용 가능한 화면 공간을 최적화합니다.

위 내용은 CSS를 사용하여 하나의 고정 너비와 다른 하나의 남은 공간을 채우는 병렬 Div를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!