반응 형 디자인 및 고정형 div

두 개의 열 레이아웃이 있습니다. 특정 화면 크기에 도달하면 모든 항목이 하나의 열에 표시됩니다. 이러한 요소의 순서는 작은 화면에서 볼 때 적절한 요소가 먼저 표시되도록하는 것이 중요합니다.반응 형 디자인 및 고정형 div

이 설정의 문제점은 두 번째 "끈적 끈적한"aside-element가 올바르게 올바르게 플로팅되지 않는다는 것입니다.

작업에서 참조하십시오 http://jsfiddle.net/zn3qz/

 .main { 
      width: 60%; 
      margin-right: 5%; 
      float: left; 
     } 
     aside { 
      width: 35%; 
      float: right; 
     }  

    <section class="main">Header</section> 
    <aside>picture</aside> 
    <aside>to be made sticky</aside> 
    <section class="main">List of things</section>

출처

2013-07-20 user2515479

jsFiddle에 왜 '
' 태그가 있습니까? – Dolchio

안녕하세요. 내용의 크기가 다양하다는 것을 설명하기 위해 (예 : 그림이 두 줄 이상을 차지함). 그렇지 않으면 모든 것이 맞춰진 것처럼 보일 것입니다. – user2515479

시도해보십시오. http://jsfiddle.net/zn3qz/1/ 반응이 좋으면이 사이트를 참조하십시오. http://twitter.github.io/bootstrap/scaffolding.html – falguni

요구 사항에 따라, 여기에 또 다른 변화는 다음과 같습니다 http://jsfiddle.net/panchroma/TtT6h/

내가 만든 한 유일한 변화는 내가 추가 한 CSS이다

aside{ 
clear:right; 
}

이렇게하면 두 번째 옆면이 첫 번째 옆면을 지우고 오른쪽으로 완전히 밀릴 수 있습니다.

희망이 도움이됩니다.

출처

2013-07-20 13:00:44

감사합니다. 나는 그것을 또한 시험해 보았다. 유일한 문제는 머리글과 사물 섹션 목록 사이의 틈이므로 그림 옆에있는 요소의 끝 부분 아래로 미끄러 져 움직입니다. – user2515479

헤더의 높이를 알고 있다면 다음과 같은 변형이 가능합니다. http://jsfiddle.net/panchroma/yE5gw/ –

jquery는 매우 도움이됩니다. 창 너비를 얻을 수 있고 그 너비에 따라 CSS를 편집하여 한 열 또는 두 열을 만들 수 있습니다.

출처

2013-07-20 16:35:54

반응 형 디자인 및 고정형 div

답변

관련 문제