CSS - 在 Wordpress 中调整大小时元素不会相互堆叠答案

【问题标题】：CSS - Elements not stacking on top of each other when re-sizing in WordpressCSS - 在 Wordpress 中调整大小时元素不会相互堆叠
【发布时间】：2017-08-02 18:00:51
【问题描述】：

我正在将一些媒体查询样式规则应用于 wordpress 网站。一个部分有两行 3 x 4 列。在每一行中都有一个图像，下面有一个段落。当我重新调整页面大小时，我需要将每个图像堆叠在其各自段落的顶部。我在我的前端测试站点上进行了这项工作，但是当我在我的 wordpress 站点上对其进行测试时，它们彼此堆叠在一起。

这是一个代码 sn-p -

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(); ?>

更新 - 小提琴中提供的代码修复了我的媒体查询，但我的主要样式现在不起作用。这就是它现在完全伸展的样子 -

【问题讨论】：

我没有看到任何指定的样式规则可以按照您的意图调整布局，但在某些时候您可能需要在 #team .four 上声明 display: block; width: 100%;
您还需要将 section#team div.row {height: auto;} 添加到您的媒体查询中 - 否则它没有合适的高度。
这将迫使您的行相信它在移动设备上只有 350 像素的高度。这将导致下一行向上移动到该点。如果您将溢出隐藏添加到您的行中，您可以看到它
@Stender 所以我需要一个单独的 div.row 规则？
你已经有一个正常风格的：section#team div.row {height: 350px;} - 这需要在你的媒体查询中被否定

标签： php css wordpress responsive-design

【解决方案1】：

这旨在帮助您找到正确的路径 - 它并不完整，但它会给您一个想法。检查小提琴，然后玩耍:)

我必须发布一些代码，用小提琴来回答。但是您的问题之一是您的正常样式的高度是固定的

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

Fiddle

很高兴它对你有用。

【讨论】：