2011-11-23 3 views
6

고정 및 유동 CSS 열에 대한 견고한 크로스 브라우저 솔루션이 있습니까? 하나의 열이 왼쪽에 고정되고 다른 열은 오른쪽에 유동성이 있어야합니다.왼쪽 열 고정 및 오른쪽 열 유체가있는 CSS 레이아웃?

아래 코드는 .promoImg.promoContent이 서로 섞여 있습니다. #recommends은 브라우저 너비의 90 %이고, .promoImg은 120px에서 수정해야하며 유체를 늘리려면 .promoContent을 사용하고 싶습니다. http://jsfiddle.net/P4RBj/

P.S : 코드

<div class="promoBlock "> 
    <div class="promoImg"> 
     fixed content 300px 
    </div> 
    <div class="promoContent"> 
     fluid content 
    </div> 
</div> 

답변

15
.promoBlock { width:90%; margin:auto; } 
.promoImg { width:300px; float:left; background-color:red; } 
.promoContent { margin-left:300px; background-color:green; } 

promoblock을 못해서는 120 픽셀에서 해결해야합니다. 그렇다면 내부 div가 더 넓습니다 (300px).

+0

그걸 축하합니다. - 간단하고 취급합니다 - 죄송합니다 (promoblock 인용문과 관련 있음). 내가 잘못 입력했습니다. - 이제 텍스트를 수정했습니다. – Dancer

관련 문제