第二行仅显示一个帖子（而不是 2 个帖子）

Question

我将我的 wordpress 主题转换为响应式.. "width" 的所有值都变为百分比 (%)

问题是：

从 400px 宽度开始显示：

第一行 2 帖子

第二行只有一个帖子（而不是 2 个帖子）..

我该如何解决这个问题，以便页面将在所有行中显示 2 个帖子？

我附上了一些图片来说明情况....

image of smartphone until 400px width

image of 500px

Answer 1

好的，你的情况有点棘手。主题的设计并没有真正以最佳方式使这些“块”响应。为了让它工作，我在你的页脚中添加了 js（如果你愿意，你可以将它移动到一个 js 文件中）

<script>
function equal_cols(el)
{
  var divs = jQuery(el);
  divs.css('height', '');
  var tallestHeight = divs.map(function(i, al) {
      return jQuery(al).innerHeight();
  }).get();
  divs.css('height', Math.max.apply(this, tallestHeight));
  //alert(Math.max.apply(this, tallestHeight));
}

( window ).resize(function() {
  $('.products-row').each(function(){
    var el = $(this).find('.product-container');
    equal_cols(el);
  });
}).resize();

jQuery(window).resize(function() {
  columnConform();
});

jQuery(document).ready(function() {
  columnConform();
});

然后在 movie-home.php 和 taxonomy-movie-genre.php 文件中，我注释掉了每隔三行添加一次的“清除”。我们不再需要这个了，因为我们用 JS 使所有的盒子大小都一样。

<?php /* if(++$counter % 3 == 0) : ?>
  <div class="clear"></div>
<?php endif; */ ?>

唯一的问题是现在所有的盒子都是一样大小的，不管里面有多少内容。