HTML : 고정 열 + 유체 열 반대 방향으로

Question

저는 고정 + 유동 열 레이아웃을 만드는 방법을 알고 있습니다 (온라인에서는 많은 예제가 있습니다).

이

<div class="my-layout"> 
    <div class="my-fixed-col">This is fixed column</div> 
    <div class="my-fluid-col">This is fluid column</div> 
</div> 

누군가가 어떻게 와 레이아웃을 생성하는 저에게 방법을 제공 할 수있다 :이 같은 첫 고정 칼럼 다음 HTML 코드에서 유체 열, 뭔가에 대해 그러나, 불행하게도, 모든 예제는 알아요 HTML에서, 제 1 및 이후 고정 된 유체의 열이 같은 :

<div class="my-layout"> 
    <div class="my-fluid-col">This is fluid column</div> 
    <div class="my-fixed-col">This is fixed column</div> 
</div> 

그런데이 고정 된 열은 왼쪽에 있습니다. 그 일을 위해

이유 :

• 내 <h1> 태그 유체 열에서, 그래서 나는 그것을하고 싶은 반응 설계 목적 페이지
• 의 정상에 가까이 나는 것 은 작은 화면에서 상단에 유체 기둥이있는 것을 좋아합니다.

Answer 1

시도해보십시오. 유체 및 고정 더하기 머리글과 바닥 글이 포함되어 있습니다.

HTML :

<div class="wrapper"> 
    <div class="header"> 
      header 
    </div> 
    <div class="wrapleft">  
     <div class="left"> 
      left 
     </div> 
    </div>  
     <div class="right"> 
      right 
     </div> 
     <div class="footer"> 
      footer 
     </div>  
</div> 

CSS :

body { 
    padding: 0px; 
    margin: 0px; 
} 
.wrapper{ 
    width: 100%; 
    margin: 0 auto; 
} 
.header{ 
    float: left; 
    width: 100%; 
    background-color: #f4f4f4 
} 
.wrapleft{ 
    float: left; 
    width: 100%; 
    background-color: #cfcfcf 
} 
.left{ 
    margin-right: 243px; 
    background-color: #afeeee; 
    height: 200px; 
} 
.right{ 
    float: right; 
    width: 233px; 
    margin-left: -233px; 
    background-color: #98fb98; 
    height: 200px; 
} 
.footer{ 
    float: left; 
    width: 100%; 
    background-color: #f4f4f4; 
}