고정 너비가 있는 한 Div와 나머지 공간을 채우기 위해 확장되는 다른 Div를 나란히 배치하려면 어떻게 해야 합니까?

CSS에서 두 개의 Div를 나란히 배치

HTML과 CSS로 작업할 때 요소를 서로 옆에 배치해야 함 일반적이다. 이 문서에서는 가로로 인접한 두 개의 div를 만드는 것이 목표이며, 한 div는 특정 너비로 ​​제한되고 다른 div는 남은 사용 가능한 공간을 차지하는 것이 목표입니다.

Flexbox 솔루션

최신 브라우저는 유연한 방식으로 요소를 배치하는 강력한 방법을 제공하는 flexbox라는 CSS 속성을 지원합니다. 원하는 레이아웃을 얻으려면 Flexbox 사용을 고려하세요. 다음은 이 접근 방식을 보여주는 코드 조각입니다.

<div>
<pre class="brush:php;toolbar:false">#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

이 예에서:

• #parent는 flexbox 레이아웃을 설정하는 포함 div입니다.
• #narrow는 너비가 200px로 고정되어 있습니다.
• #wide가 설정되어 있습니다. flex: 1 속성 덕분에 화면의 남은 사용 가능한 공간을 늘려서 차지할 수 있습니다.

Flexbox를 활용하면 복잡한 너비 계산 없이 병렬 div를 쉽게 만들 수 있습니다. 또는 추가 CSS 규칙. 이 솔루션은 간결하고 유연하므로 다양한 시나리오에 적합합니다.