Box2가 제외 된 후 Box1을 남은 공간을 채우게하는 방법은 무엇입니까? 또는: Box1은 어떻게 나머지 공간을 채우고 Box2가 차지하는 영역을 어떻게 제외합니까?

Box1을 제외한 후 Box1을 남은 공간을 채우게하는 방법은 무엇입니까?

이 기사는 레이아웃 효과를 달성하는 방법을 살펴 봅니다. Box1 요소는 나머지 공간을 차지하며 Box2 요소가 차지하는 영역을 제외한 후에도 여전히 모 컨테이너를 채 웁니다. 질문에 주어진 초기 코드는 인라인 블록을 사용하여 예상되는 수평 배열보다는 Box1 및 Box2를 수직으로 배열하게 만들고 Box1은 나머지 공간을 차지합니다. 예상 결과를 얻으려면 레이아웃 방법을 조정해야합니다.

이 기사에는 두 가지 솔루션이 제공됩니다.

솔루션 1 : calc () 함수를 사용하십시오

이 체계는 디스플레이를 보유합니다. 원래 코드의 인라인 블록 설정을 보유하고 CSS Calc () 함수를 통해 Box1의 너비를 계산합니다. Calc () 함수를 사용하면 간단한 수학 연산을 수행 할 수 있습니다. 여기서 상기 컨테이너 너비를 사용하여 Box2의 너비 (200px)를 빼기 위해 Box1의 너비를 계산합니다. 코드는 다음과 같습니다.

 #box1 {
  너비 : calc (100% -200px);
}

이 방법은 Box2의 너비를 미리 알아야한다는 점에 유의해야합니다. Box2의 너비가 동적으로 변경되면 Calc ()의 값은 실제 상황에 따라 동적으로 조정되어야합니다.

해결책 2 : Flex 레이아웃을 사용하십시오

이 솔루션은 Flex 레이아웃을 사용하여보다 유연한 레이아웃 제어를 달성합니다. 부모 컨테이너 #Content를 Flex 컨테이너에 설정하고 Flex를 사용하여 Box1에 대한 나머지 공간을 할당하십시오. 1. Flex-Shrink : 0은 Box2가 압축되는 것을 방지합니다. 코드는 다음과 같습니다.

 #content {
  디스플레이 : Flex;
  플렉스 방향 : 행;
}

#box1 {
  플렉스 : 1;
}

#box2 {
  Flex-shrink : 0;
  너비 : 200px;
}

플렉스 레이아웃은 더 강력한 레이아웃 기능을 제공하므로 다양한 크기의 요소와 반응 형 레이아웃의 요구를보다 편리하게 처리 할 수 ​​있습니다. 솔루션 1 및 솔루션 2와 비교하여 더 유연하고 유지 관리가 더 쉽습니다.

위 내용은 Box2가 제외 된 후 Box1을 남은 공간을 채우게하는 방법은 무엇입니까? 또는: Box1은 어떻게 나머지 공간을 채우고 Box2가 차지하는 영역을 어떻게 제외합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!