반응이 빠른 사이드 바 Wordpress 테마

나는 다음을 가지고 누구나 내 마크 업 붕괴에 내 사이드 바를 만들고 워드 프레스 블로그 테마로 내 주요 콘텐츠 아래에 떨어 뜨려야한다고 설명 할 수 있는지 궁금합니다. 특정 미디어 @ 쿼리가 필요할 수도 있지만 무엇을 확신 할 수없는 느낌이 들었습니다.반응이 빠른 사이드 바 Wordpress 테마

이것은 처음부터 확립하고자하는 WordPress 블로그 테마 용입니다. nav와 이미지가있는 헤더가 있습니다. 문제가없는 헤더가 있습니다. 그러나 왼쪽과 왼쪽 사이드 바 div가 위젯에 대해 오른쪽으로 떠 다니는 경우에는 콘텐츠 div가있는 메인 컨텐츠 컨테이너가 있어야합니다. 나는 영원히 감사 할 것입니다.

CSS 코드 :

.gridContainer { 
margin-left: auto; 
margin-right: auto; 
width: 87.36%; 
padding-left: 1.82%; 
padding-right: 1.82%; 
} 
#LayoutDiv1 { 
clear: both; 
float: left; 
margin-left: 0; 
width: 100%; 
display: block; 
} 

#LayoutDiv2 { 
clear: both; 
float: left; 
margin-left: 0; 
width: 100%; 
display: block; 
} 

body, html { 
height: 100%; 
} 

#content{ 
display:inline-block; 
float:left; 
width:80%; 
} 

#sidebar{ 
display:inline-block; 
float:left; 
width:20%; 


} 



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 

@media only screen and (min-width: 481px) { 
.gridContainer { 
width: 90.675%; 
padding-left: 1.1625%; 
padding-right: 1.1625%; 
} 
#LayoutDiv1 { 
clear: both; 
float: left; 
margin-left: 0; 
width: 100%; 
display: block; 
} 
#LayoutDiv2 { 
clear: both; 
float: left; 
margin-left: 0; 
width: 100%; 
display: block; 
} 



/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and  Tablet Layout. */ 

@media only screen and (min-width: 769px) { 

.gridContainer { 
width: 88.2%; 
max-width: 1232px; 
padding-left: 0.9%; 
padding-right: 0.9%; 
margin: auto; 
} 
#LayoutDiv1 { 
clear: both; 
float: left; 
margin-left: 0; 
width: 100%; 
display: block; 
} 
#LayoutDiv2 { 
clear: both; 
float: left; 
margin-left: 0; 
width: 100%; 
display: block; 
}

HTML 코드 당신은 콘텐츠에 대한 media query 예를 들면 사이드 바 작성해야

<body> 
<!--HEADER, CONTENT, FOOTER--> 
<div class="gridContainer clearfix"> 
<!--HEADER--> 
<div id="LayoutDiv1"> 
     <!--NAVIGAIION + LOGO--> 
     <nav> 
      <div class="header"> 

        <div id="logo"></div> 

        <!--navigation list items--> 
        <ul> 
         <li><a href="">home</a></li> 
         <li><a href="">about</a></li> 
         <li><a href="">contact</a></li> 
         <li><a href="">work</a></li> 

        </ul> 


      </div> 
     </nav> 
     <!--end of NAVIGATION + LOGO--> 


    <div id="LayoutDiv2" class="clearfix"> 

     <div id="content"> 

      <p> This is the Content</p>  

     </div> 


     <aside> 

      <div id="sidebar"> 

       <p> This is the Sidebar</p> 

      </div> 

     </aside> 





    </div><!--end of LayoutDiv2--> 





</div><!--end of LayoutDiv1--> 




</div><!--end of Grid Container, HEADER, CONTENT, FOOTER--> 


</body>

출처

2014-01-18 user3208676

감사합니다. 내가 찾고있는 것이 고마워요. 그러나 이제 나는 더 이상의 질문을한다. 주 콘텐츠 div에는 콘텐츠가 있고, 검색 폼과 같은 사이드 바에는 분명히 위젯이 있습니다. 검색 양식 입력 및 내 텍스트

주 div의 콘텐츠가 이스케이프하고 각 div에서 넘칠 수 있습니다. 패딩을 추가하면 div가 사이드 바 div 위에있는 콘텐츠 div와 함께 접 힙니다. 이 문제를 해결하려면 어떻게해야합니까? – user3208676

이 허용

@media (max-width: 600px) { 
    #sidebar{ clear: both; width: 100%; } 
    #content{ clear: both; width: 100%; } 
}

당신이 배치를 divs는 서로의 아래에 있고 그 (것)들을 페이지의 전폭으로 만든다.

작동 예제는 JSFiddle을 참조하십시오.

출처

2014-01-18 10:16:59

반응이 빠른 사이드 바 Wordpress 테마

답변

관련 문제