반응 형 z- 레이아웃을 만드는 방법

부트 스트랩을 사용하여 반응 형 z- 레이아웃 페이지를 만들고 싶습니다. 문제는 그것이 모바일에 올 때 레이아웃이 다르다는 것입니다.반응 형 z- 레이아웃을 만드는 방법

다음은

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-4"><img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" style="width:100%"></div> 
       <div class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
      </div> 
     </div> 
    </div> 
    <br> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-8 z-first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
       <div class="col-md-4 z-second"><img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" style="width:100%"></div> 
      </div> 
     </div> 
    </div> 
</div>

이 without JS 및 with JS를 참조하십시오 내 HTML입니다. JS없이 할 수있는 방법이 있습니까?

출처

2014-11-07 Mifas

부트 스트랩은 사용하지 않았지만 imho는 의미 상 다소 복잡하고 가벼운 마크 업을 발견했습니다.

나는 그것이 완벽하지 확실 해요,하지만 난 많은이 마크 업 작업하는 것을 선호 : 여기

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="Reset.css"> 
     <link rel="stylesheet" href="Style.css"> 
    </head> 
    <body> 
     <section> 
      <img src='YourPicture.png'> 
      </img> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </section> 
     <section> 
      <img src='YourPicture.png'> 
      </img> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </section> 
    </body> 
</html>

당신이 원하는 방식으로 반응 레이아웃 부분의 돌봐 베어있는 style.css 파일입니다 이 마크 업의 경우 :

section 
{ 
    clear: both; 
    display: block; 
} 

img 
{ 
    display: block; 
} 

p 
{ 
    display: block; 
} 

section:first-child img 
{ 
    float: left; 
} 

section:nth-child(2) img 
{ 
    float: right; 
} 

@media (max-width: 768px) 
{ 
    section:first-child img 
    { 
     width: 100%; 
     float: none; 
    } 

    section:nth-child(2) img 
    { 
     width: 100%; 
     float: none; 
    } 
}

아니요 Javascript :).

출처

2014-11-07 03:51:13 Magnitus

반응 형 z- 레이아웃을 만드는 방법

답변

관련 문제