하나의 고정 너비 Div와 하나의 유연한 너비 Div로 레이아웃을 만드는 방법은 무엇입니까?

가변 너비 분포가 있는 Div

웹 개발에서는 두 개의 div가 사용 가능한 공간을 공유하지만 하나의 div가 공유되는 레이아웃을 만드는 것이 유용한 경우가 많습니다. div의 너비는 고정되어 있습니다.

질문:

한 div는 고정 너비를 유지하고 다른 div는 남은 공간을 차지하도록 div의 너비를 어떻게 조정할 수 있나요?

해결책:

이를 달성하려면 다음 단계를 따르세요.

1. HTML 구조:

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

2. CSS:

고정 너비 오른쪽 Div:

<code class="css">.right {
    float: right;
    width: 250px;  // Set your desired fixed width
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}</code>

가변 너비 왼쪽 Div:

<code class="css">.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}</code>

3. 추가 참고 사항:

• 더 나은 브라우저 간 호환성을 위해 float 대신 display: table을 사용할 수도 있습니다.
• 특정 요구 사항에 따라 .right의 너비 속성을 조정하세요. .
• 이 접근 방식을 사용하면 고정 너비 div는 변경되지 않고 가변 너비 div는 남은 공간을 채우도록 조정됩니다.

위 내용은 하나의 고정 너비 Div와 하나의 유연한 너비 Div로 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!