WordPress的模板對齊

Question

我想對齊左邊的內容和右邊的部件區域以水平線堆疊。這是我的代碼： -

get_header(); 

?> 
    <div id="primary" class="content-area"> 
     <main id="main" class="site-main" role="main"> 
        <div class="page-box"><!--page wraper box-->  
      <?php 
      while (have_posts()) : the_post(); 

       get_template_part('template-parts/content', 'page'); 

       // If comments are open or we have at least one comment, load up the comment template. 
       if (comments_open() || get_comments_number()) : 
        comments_template(); 
       endif; 

      endwhile; // End of the loop. 
      ?> 
        </div><!--page wraper box-->  
     </main><!-- #main --> 
    </div><!-- #primary --> 

<?php 
get_sidebar('left'); 
get_sidebar('right'); 
get_footer(); 

和CSS： -

/* Right side widgets. */ 
.right-widgets{ 
float:right; 
margin-right:-300px; 
} 


/* Left side widgets. */ 
.left-widgets{ 

    float:left; 
    margin-left:-300px; 
} 

    .site-content{ 
    position:relative; 
    width: 1000px; 
    width: 62.5rem; 
    margin: 2em auto 0em; 

} 
.content-area { 
    width: 100%; 
    float:none; 
    display:inline-block; 
    position:relative; 
    clear:none; 
} 

.site-content .widget-area { 
    position:relative; 
    overflow: hidden; 
    width: 300px; 
    padding:1em; 
    display:inline-block; 
    clear:none; 
} 

會發生什麼事是，它是定位部件領域的左，右，因爲它應該，但下面的內容區域，而不是線。

當我在內容區域正常工作之前加載左側邊欄，但在移動屏幕上的左側邊欄加載內容之前，我希望兩個邊欄在內容之後出現。 任何想法我在這裏做錯了什麼？

Answer 1

如果找不到其他解決方案，可以嘗試這種方法。您可以在內容之前和div內容之後調用左側邊欄兩次。給出不同的類名。使用CSS隱藏移動設備中的第一個左側欄並在桌面上顯示，反之亦然。