고정 너비와 유연한 너비를 사용하여 두 요소 간에 화면 너비를 나누는 방법은 무엇입니까?

두 요소 사이에 화면 너비 나누기

웹 디자인에서 두 div 사이에 화면 너비를 나누어야 하는 경우가 있습니다. 하나는 고정된 너비를 갖고 다른 하나는 나머지 공간을 차지합니다. 이를 달성하는 방법은 다음과 같습니다.

백분율 기반 너비와 함께 Float 사용:

이 접근 방식은 CSS float 속성을 사용하여 div를 나란히 배치합니다.

.left {
    float: left;
    width: 83%;
}

.right {
    float: right;
    width: 17%;
}

div가 상위 컨테이너의 전체 너비를 채우도록 너비를 합하면 최대 100%가 됩니다.

Flexbox 사용:

Flexbox는 유연한 크기를 사용하여 요소의 크기와 위치를 제어할 수 있는 보다 다양한 레이아웃 시스템입니다.

.container {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    width: 250px;
}

이 예에서는 ".container" div가 Flexbox로 표시되도록 설정되었습니다. , 그리고 ".left" div에는 가변 확장 계수 1이 부여되어 고정 너비 ".right" div 뒤에 남은 공간을 채우기 위해 확장할 수 있습니다.

표시 테이블 사용 :

display: table을 사용하여 첫 번째 열의 너비가 고정되고 두 번째 열이 나머지 공간을 차지하는 2열 레이아웃을 생성할 수도 있습니다.

.left {
    display: table-cell;
    width: 250px;
}

.right {
    display: table-cell;
}

위 내용은 고정 너비와 유연한 너비를 사용하여 두 요소 간에 화면 너비를 나누는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!