Responsive design 用div创建一个响应性强的站点，在主页上创建两个栏

有没有可能对我的网站进行编程，使主页上的这两列帖子也在智能手机上显示为两列？我使用的是一个12个孩子的主题，这是一个响应主题，但是我用来创建两列帖子的代码非常简单，所以它只是在智能手机上合并成一列

下面是我的index.php中的代码摘录，它显示了我创建这两列的方式。这些div还与my 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>

---

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

即，编辑您的style.css（而不是主主题style.css）并更改：

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

致：

尽管这样做之后，您可能需要添加一些填充/空白空间

---

这就是你想要的吗？

页面的外观由css规则控制。显示的代码本身不会创建外观。你必须编辑主题。谢谢，@Whiststoe。计算机或ipad显示屏的一些CSS编辑并不能直接转换到智能手机上，所以这正是问题所在。有没有CSS编辑，我可以使我的两列显示在iphone上并排而不是作为一个单一的列？下面的matt给出了一个很好的指导，但是它仍然不会影响iphone的显示。这个主题的css有规则根据视口的宽度改变列的数量。如果在桌面计算机上调整浏览器窗口的大小，可以看到这一点。找到主题的css文件，并找到它指定列宽和浮动的位置。一个小技巧是寻找“@media”的表达。哦，呸。50%的编辑实际上只在ipad上解决了这个问题（这很好，谢谢）。但在iphone上，我仍然可以看到一列。我想知道为什么。这似乎是个正确的建议。不管怎样，如果有人有其他的信息可以插话，请告诉我！在iPhone上，它变成了一个不同的问题，您需要解决视口大小，并更改响应设计，使其不以如此低的分辨率下降到一列。但我不确定你在这些文件中显示的任何内容在iPhone上是否可读，如果它们仍然是两列，那么文本将非常小。不过，如果你想这样做，你可以改变你的媒体查询…谢谢，非常感谢你的信息！

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