CSS - 在Wordpress中重新調整大小時不能堆疊在一起的元素

-1

我正在將一些媒體查詢樣式規則應用於wordpress網站。一節有兩排3×4列。在每一行中都有一個下面有段落的圖像。當我重新調整頁面大小時，我需要將每個圖像堆疊在各自的段落之上。我曾在我的前端測試網站上工作，但是當我在我的wordpress網站上測試它時，他們會連續堆疊在一起。CSS - 在Wordpress中重新調整大小時不能堆疊在一起的元素

這裏有一個代碼片段 -

body { 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    max-width: 100%; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
section#team { 
 
    height: 800px; 
 
    max-width: 100%; 
 
} 
 

 
section#team div.row { 
 
    height: 350px; 
 
} 
 

 
#team .four { 
 
    position: relative; 
 
    width: 320px; 
 
    padding: 30px; 
 
} 
 

 
#team h4 { 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
#team img { 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    bottom: 50%; 
 
    left: 40%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#team p { 
 
    text-align: center; 
 
    font-size: 10px; 
 
    margin-top: 100px; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    div.container { 
 
    float: none; 
 
    margin: 0; 
 
    width: calc(100% - 40px); 
 
    box-sizing: border-box; 
 
    } 
 
    div.column { 
 
    float: none; 
 
    } 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    body { 
 
    max-width: 500px; 
 
    border: 1px dashed #ccc; 
 
    min-height: 400px; 
 
    } 
 
    
 
    section#team { 
 
    float: none; 
 
    height: auto; 
 
    } 
 
    
 
    #team .four { 
 
    width: auto; 
 
    height: auto; 
 
    position: relative; 
 
    transform: translate(-30%, -5%); 
 
    } 
 
}

<body> 
 
    <section id="team"> 
 
    <div class="container"> 
 
     <div class="twelve columns"> 
 
     <h4>MEET THE TEAM</h4> 
 
     <div class="row"> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. 
 
      </p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. 
 
      </p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body>

我不知道如果我需要一套不同的規則，我的WordPress網站 - 這裏是該頁面的PHP代碼 -

<?php /* Template Name: Meet the team */ ?> 
<?php get_header(); ?> 

<?php get_template_part('topimage-about'); ?> 
    <section id="team"> 
     <div class="container"> 
      <div class="twelve columns"> 
          <h4>MEET THE TEAM</h4> 
       <div class="row"> 
         <div class="four columns"> 
           <?php if(get_field('team_img_1')): ?> 

           <img src="<?php the_field('team_img_1'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_1'); ?> 
           </p> 
         </div>   
         <div class="four columns"> 
           <?php if(get_field('team_img_2')): ?> 

           <img src="<?php the_field('team_img_2'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_2'); ?> 
           </p> 
         </div> 
         <div class="four columns">  
           <?php if(get_field('team_img_3')): ?> 

           <img src="<?php the_field('team_img_3'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_3'); ?> 
           </p> 
         </div>  
       </div> 

       <div class="row"> 
         <div class="four columns">  
           <?php if(get_field('team_img_4')): ?> 

           <img src="<?php the_field('team_img_4'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_4'); ?> 
           </p> 
         </div> 
         <div class="four columns">  
           <?php if(get_field('team_img_5')): ?> 

           <img src="<?php the_field('team_img_5'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_5'); ?> 
           </p> 
         </div> 
         <div class="four columns">  
           <?php if(get_field('team_img_6')): ?> 

           <img src="<?php the_field('team_img_6'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_6'); ?> 
           </p> 
         </div> 
       </div> 
      </div> 
     </div>     
    </section> 

     <?php get_template_part('form'); ?> 





<?php get_sidebar(); ?> 

<?php get_footer(); ?>

更新 - 小提琴中提供的代碼已修復我的媒體查詢，但我的主要樣式現在不起作用。這是現在的樣子，在充分伸展 -

來源

2017-08-02 Mike.Whitehead

我沒有看到任何指定的樣式規則，將調整佈局，因爲你打算，但在某些時候，你可能需要聲明'display：block;寬度：100％;'''#team .four' – UncaughtTypeError

您需要向媒體查詢添加section＃team div.row {height：auto;} - 它沒有合適的高度。 – Stender

這將迫使你的排，相信它只有350px的高度在移動。這將導致下一行移動到該點。你可以看到它，如果你添加溢出隱藏到你的行 – Stender

這是旨在幫助您找到正確的道路 - 這是不完整的，但它會給你一個想法。檢查小提琴，並玩弄:)

我必須張貼一些代碼，用小提琴來回答。但你的問題之一是，你在你的正常風格

@media screen and (max-width: 480px) { 
    section#team div.row { 
      height:auto; 
    } 
}

Fiddle

高興的是，它的工作對你有一個固定的高度。

來源

2017-08-02 10:00:51 Stender

CSS - 在Wordpress中重新調整大小時不能堆疊在一起的元素

回答

相關問題