고정 너비 Div 이후 Div가 남은 공간을 차지하도록 만드는 방법은 무엇입니까?

두 개의 Div를 조정하는 방법(하나는 고정 너비이고 다른 하나는 남은 공간을 차지함)

두 개의 div 컨테이너를 사용하여 작업하는 경우 특정 너비가 필요하고 다른 하나는 남은 공간을 동적으로 차지해야 하는 경우 이 레이아웃을 달성하는 몇 가지 접근 방식이 있습니다. 두 가지 방법을 살펴보겠습니다.

표시 사용: Table 또는 Table-Cell

이 방법에서는 CSS 표시 속성을 사용하여 표와 같은 구조를 만듭니다.

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

이 경우 "오른쪽" div의 너비는 250px로 고정되어 있고, "왼쪽" div는 "overflow: Hidden" 속성으로 인해 나머지 공간을 차지합니다.

Float 및 백분율 너비 사용

또 다른 접근 방식은 CSS float 속성을 사용하고 div의 너비를 백분율로 설정하는 것입니다.

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

여기서 "왼쪽" div는 사용 가능한 너비의 83%를 차지하고 너비가 고정된 "오른쪽" div는 16%를 차지합니다.

데모 예시

확인 이러한 메소드가 실제로 작동하는 모습을 보려면 JSFiddle에서 다음 라이브 데모를 확인하세요. http://jsfiddle.net/SpSjL/

위 내용은 고정 너비 Div 이후 Div가 남은 공간을 차지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!