CSS：使用@media 查询将两列堆栈转换为单个堆栈

Posted 2023-03-06

【中文标题】CSS：使用@media 查询将两列堆栈转换为单个堆栈

【英文标题】：CSS: Convert a two column stack into a single with @media queries

【发布时间】：2014-06-08 13:51:41

【问题描述】：

我有两个 <divs>（左列，右列）包含 Wordpress 帖子（越近，数字越低）

left-col | right-col
--------------------
--post 1 | --post 2
--post 3 | --post 4
--post 5 | --post 6

使用@media 和CSS 我想将其转换为这样的单列：

single-col
----------
--post 1
--post 2
--post 3
--post 4
etc.

请注意，我并不想将right-col 推到left-col 下，而是要更改帖子的堆积方式。

目前我的 s 有以下相关值：

#left-col 
    width: 420px;
    float: left;

#right-col 
    width: 420px;
    float: left;    

替代问题：有没有其他方法可以让这两个列布局在移动屏幕上变得平坦，即使它需要更多感谢 CSS/媒体查询？

【问题讨论】：

假设您的 left-col 是 <div> 和 right-col 是单独的 <div> 您将无法在不更改标记的情况下像您想要的那样交错帖子，即不能单独使用 CSS 完成..

【参考方案1】：

我会在没有列 div 的情况下解决这个问题，并可能使用 nth-child css selector

类似：

jsfiddle上的演示

.posts > div 
    width: 100%;


@media all and (min-width: 600px)
    .posts > div 
         width: 50%;
    

    // optional: additional styles specific to either column
    .posts > div:nth-child(2n) 
         color: red;
    

    .posts > div:nth-child(2n+1) 
         color: blue;
    


<div class="posts">
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
    <div>Post Content</div>
</div>

【讨论】：

哇，谢谢。我已经用你的代码设置了一个 jfiddle 并添加到你的帖子中。它比我迄今为止尝试过的任何解决方案都要好！

不幸的是，它产生的网格布局不符合我的需要，因为帖子内容不必具有相同的高度。我仍然需要找到一种方法来获取我的两个列解决工作，再次感谢！

【参考方案2】：

尝试使用jQuery，它带有一些操作divs内容的功能，如append()、replaceWith()、insertAfter()。

您可以将元素从一个div 移动到另一个，刷新或附加divs。

在此处查看这些功能的说明：

append(),

replaceWith()

insertAfter()

如果您不熟悉 jQuery，您可能想先查看W3Schools jQuery tutorial。