반응 형 디자인의 Div 구조

Question

반응 형 디자인에서는 3 개의 div를 서로 다른 순서로 플로팅하려고합니다. 모바일 버전에서는 상관 관계 (div 1, div 2, div 3)가 있지만 데스크탑 버전에서는 div 3을 div 1 근처에 배치하고 div 2는 하단에 배치하려고합니다. 나는 그것을 float, clears와 triying하고있다. 그러나 나는 그것을 고치는 법을 모르고있다. 나는 모형을 공유한다. 누구든지 도울 수 있니? 감사

mockup http://s2.subirimagenes.com/imagen/previo/thump_8425505positiondiv.png

이 HTML 구조 경우 : 절대 위치 및 여백 바닥

#main-container{ 
    width:33%; 
    background-color:#856; 
    float:left; 
} 

#cadiz-a-caballo{ 
    width:33%; 
    background-color:#376; 
} 

#frm-container{ 
    width:30%; 
    background-color:#856; 
    float: right; 
} 

다른 시도 예에서

<div id="fondo-web"> 

<div id="main"> 

    <section id="main-container" name="div1"> 
     Random Image 
    </section> 

    <section id="cadiz-a-caballo" name="div2"> 
     Copy Text   
    </section> 

    <section id="frm-container" name="div3"> 
     Contact Form 
    </section> 


</div> 

</div> 

이 하나 개의 시도 아버지 용기 :

#main-container{ 
    width:62%; 
    background-color:#856; 
    float:left; 
} 

#cadiz-a-caballo{ 
    width:70%; 
    position: absolute; 
    background-color:#376; 
    top:600px; 
} 

#frm-container{ 
    width:35%; 
    background-color:#856; 
    float: right; 

} 
#main{ 
    width:75%; 
    margin:auto; 
    margin-bottom: 150px; 
    overflow: hidden; 
    background-color: #343; 
} 

이 제 3의 div 공간을 떠나

#main-container{ 
    width:65%; 
} 

: 모든 http://jsfiddle.net/uyQzQ/1/

먼저 당신이 부모의 일정 비율에 최초의 사업부를 만들고 싶어 :

Answer 1

이 당신이 원하는 더 이하 나중에 떨어지게.

#cadiz-a-caballo{ 
    width: 100%; 
} 

마지막으로 첫 번째 DIV의 왼쪽에서 오른쪽으로 공간에 3 DIV의 위치를 ​​원하는 :

는 그런 다음 두 번째 DIV 부모의 전체 너비가되고 싶어요. 당신은 단지 크기로 3 DIV의 폭을 설정해야합니다, 지금

#main{ 
    position: relative; 
} 

이렇게하려면 그렇게 3 DIV의 절대 위치가 부모에게 상대가 될 부모의 위치를 ​​아닌 문서를 필요 왼쪽에있는 공간의 오른쪽 상단에 위치 시키십시오.

#frm-container{ 
    width:35%; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

각 요소 사이에 여백을 넣지 않았습니다. 이를 고려하여 너비를 조정하여 여백을 추가 할 수 있습니다.

이 접근법의 가장 큰 문제점은 3 번째 div가 div 1보다 높거나 짧아야한다는 것입니다. 그렇지 않으면 div 3이 문서 흐름에서 벗어나 div2 위에 표시됩니다 그리고 그 이하의 내용도 충분히 길다).