отзывчивый sidebar wordpress theme

У меня есть следующее, и мне интересно, поможет ли кто-нибудь объяснить, что я должен сделать, чтобы моя боковая панель в моей разметке рухнула и опустилась ниже моего основного контента в теме блога wordpress. У меня есть ощущение, что мне может понадобиться конкретный медиа-запрос, но я не уверен в чем.отзывчивый sidebar wordpress theme

Это все для темы блога Wordpress, которую я пытаюсь установить с нуля. Существует заголовок с навигацией и изображением, с которыми у меня нет проблем, но мне нужен контейнер содержимого с содержимым 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 КОД

<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 экранируется и переполняется из их соответствующих разделов. Когда я добавляю padding, divs также обрушиваются с содержимым div над боковой панелью div. Что я могу сделать, чтобы исправить это? – user3208676

Вы должны написать media query для вашего контента и боковую панель, например:

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

Это позволяет разместить divs под друг другом и сделать их полной шириной страницы.

См. Это JSFiddle для примера.

источник

2014-01-18 10:16:59

отзывчивый sidebar wordpress theme

ответ

Смежные вопросы