0

是否可以对我的网站进行编程，使主页上的这两列帖子在智能手机上也显示为两列？我正在使用 22 个子主题，这是一个响应式主题，但我用来创建两列帖子的代码非常基本，所以它只是在智能手机上组合成一列。

下面是我的 index.php 中的代码摘录，显示了我创建两列的方式。这些 div 也对应于我的 style.css 文件中的简单 CSS

如果允许它们在智能手机上显示为两个独立的列，我很乐意采用不同的方法来创建列。

如果您想查看该页面，该站点位于：internalcompass.us/castle

谢谢

</div>
<div id="right-column">
<?php $my_query = new WP_Query('category_name=favorites');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate[] = $post->ID ?>
  <?php get_template_part( 'content', get_post_format() ); ?>
  <?php endwhile; ?>
</div>
<div id="left-column">
<?php $my_query = new WP_Query('category_name=Recents');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate[] = $post->ID ?>
  <?php get_template_part( 'content', get_post_format() ); ?>
  <?php endwhile; ?>
</div>
4

1 回答 1

1

将右栏和左栏从 270 像素的宽度更改为 50% 的宽度。然后，当您的窗口高于 600 像素（大多数现代手机）时，您仍然会看到两列。

即编辑你的style.css（不是主题style.css）并改变：

div#left-column {
    width: 270px;
    float: left;
    clear: none;
    }
div#right-column {
    width: 270px;
    float: right;
    clear: none;
    }

至：

div#left-column {
    width: 50%;
    float: left;
    clear: none;
    }
div#right-column {
    width: 50%;
    float: right;
    clear: none;
    }

尽管您可能希望在执行此操作后添加一点填充/边距空间。

那是你要找的吗？

于 2013-08-03T18:48:14.370 回答