이 열 레이아웃, 하나의 열 수직 중간

Question

참조 IE6에서 fiddle example

필요 작업 +

<div class="container"> 
    <div class="right"> 
     right content fixed width 
    </div> 
    <div class="left"> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/> 
    </div> 
</div> 

방법 왼쪽으로 바로 사업부는 높이가 동일하게하고, 내용이 수직 중간이 될? 여기

Answer 1

을 추가? 자, 여기 IE6의 정신으로는 이상적이지 않은 해결책이 있습니다.: |

---

HTML :

<div class="container"> 
    <div class="left"> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/> 
     left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/>left content flexible widthffffffffffff<br/> 
     <div class="right-column"></div> 
     <div class="right-content">right content fixed width</div> 
    </div> 
</div> 

CSS :

.right-column { 
    width: 180px; 
    height: 10000px; 
    position: absolute; 
    background: #fc0; 
    right: 0; 
    top: 0; 
} 
.right-content { 
    height: 20px; 
    width: 180px; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    margin-top: -10px; 
    text-align: center; 
} 

.left { 
    background: #e8f6fe; 
    overflow: hidden; 
    padding-right: 180px; 
    position: relative; 
    zoom: 1; /* hasLayout */ 
    min-width: 100px; 
} 

(IE6-viewable JSFiddle results here)

---

그것은 이러한 부분에서 작동 3,691,363,210

:

• 는 overflow: hidden; 속성이
• 오른쪽 열에 두 개의 분리 된 부분이 왼쪽 열의 태그에 오른쪽 열을 이동 hasLayout
• 를 통해 작업을 진행하게 zoom: 1; 속성을 적용
  • 열 배경에 대해 매우 큰 빈 div (동일한 열 높이의 환상 제공)
  • 수직 포지셔닝 지정된 height와 콘텐츠 div
• 위치 절대적 상대적 위치 왼쪽 열
• 오른쪽 상단의 오른쪽 열 소자는 오른쪽 열의 폭과 동일한 좌측 열에 오른쪽 여백을 추가
• 수직 기반으로 올바른 내용을 정렬 (왼쪽 열을 덮고있는 오른쪽 열을 피하기 위해)의 윈도우가 너무 작은 경우
• 그래서 최신 브라우저가 콘텐츠를 차단하지 않는 왼쪽 컬럼에 min-width: 100px; 추가 height을 지정

---

시주의 사항 :

• 당신은 그것이있는 경우 오른쪽 칼럼의 내용이 차단 얻을 것이다 내용
• 에 맞게 height 및 .right-content의 margin-top을 조정해야합니다 왼쪽 열보다 큰 높이

Answer 2

당신이, 내가 오른쪽 DIV에 position;absolute 추가 이동은 float:right을 제거하고, 응 IE6를 지원 right:0px

http://jsfiddle.net/LQEM7/2/