HTML CSS : 고정 폭 2 열 레이아웃

<div style="width: 800px; height: 600px"> 

    <div style="float:left; width: 100px"> 
     left fixed-width column 
    </div> 
    <div style="???"> 
     right stretching column (the width should be 700px in this case.) 
    </div> 

</div>

왼쪽 열이 고정 크기이고 오른쪽 열이 늘어나는 두 열 레이아웃을 만드는 표준 방법은 무엇입니까?HTML CSS : 고정 폭 2 열 레이아웃

두 열 스타일 모두 독립적입니다. 여기에 몇 가지 해결책이 있지만 왼쪽 열의 너비를 변경하면 오른쪽 열의 스타일 (예 : 여백)을 함께 변경해야합니다.
이전 브라우저를 지원할 필요가 없습니다. 표준이라면 괜찮습니다.

출처

2012-05-13 user1392013

overflow: hidden을 두 번째 div에 적용하십시오. 새로운 block formatting context을 소개합니다. Can overflow:hidden affect layout?에서 자세한 정보를 확인할 수 있습니다.

jsFiddle Demo

출처

2012-05-13 10:06:52 kapa

간단하고 우아한 해결책! – user1392013

@ user1392013 만족 스럽다면 내 대답의 왼쪽에있는 눈금으로 내 대답을 수락 할 수 있습니다. – kapa

** 오버플로 설정에 대해 매우주의해야합니다. 숨겨진 ** ... 할당 된 영역을 벗어나면 내용을 숨 깁니다. 고정 된 양의 콘텐츠를 보유하더라도 사용자는 글꼴 크기와 같이 레이아웃에 영향을 줄 수있는 특정 브라우저 디스플레이를 제어 할 수 있습니다. 사용자가보다 편안한 읽기를 위해 글꼴 크기를 늘리면 오른쪽 div의 콘텐츠가 할당 된 공간보다 크게 렌더링 될 수 있으며 '오버플로 : 숨김'은 해당 사용자에게 보이지 않음을 의미합니다. 변경해야 할 추가 CSS 값을 위해 고객을 소외시키는 것이 가치가 있습니까? – FluffyKitten

또한 두 열을 포장 사업부를 사용 (그리고 만약 당신이 좋아하면, 블록으로 그들을 중심) 수 - 다음, 첫 번째 열 너비를 설정하기 위해 두 번째 열에서 절대 위치를 사용 그것의 왼쪽 테두리는 첫 번째 칼럼의 가장자리이고 오른쪽 테두리는 래퍼의 가장자리이다.

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;"> 

<div style="width:100px; height:100px; padding:15px; background-color:aqua;"> 
</div> 

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px; background-color:blue;"> 
</div> 

</div>

JSFiddle

출처

2014-04-08 21:04:33 Ryan

HTML CSS : 고정 폭 2 열 레이아웃

답변

관련 문제