css - 如何在两列 div 中水平排序 block ？

Question

我正在自定义一个 Wordpress 主题，以在主页上以两列而不是一列显示新文章。我可能在使用 column-count 时做得不对属性，我想应该用来分割文本，而不是安排 block 布局。

    .content{
        column-count:2;
    }

    .article{
      display: inline-block;
     } 

每篇文章缩略图都有自己的<div class="article"> , 在主内 <div class="content"> , 当前以垂直顺序显示。新文章动态添加为第一个 div(article n 始终是最后发布的)。如何在主要“内容”div 中水平而不是垂直排序文章:

当前布局:

#column 1        #column2

Article n        Article n-4      
Article n-1      Article n-5   
Article n-2      Article n-6    
Article n-3      Article n-7  

预期布局:

#column 1        #column2

Article n        Article n-1     
Article n-2      Article n-3   
Article n-4      Article n-5    
Article n-6      Article n-7 

我想避免任何涉及创建“三列 body 布局”(content1、content2、侧边栏)的解决方案，并坚持使用当前的两列 body (内容 - 侧边栏)，内部有两列 content .

我会很感激一个纯粹的css/html解决方案。

编辑:Simrandeep Singh 的回答是可以接受的，但只要有不同大小的 block ，它就会变得困惑:

.content{
    width: 80%;
}

.article{
    margin:10px;
    float: left;
    width: 39%;
    background-color:green;
} 

.regular{
    height:100px;
}

.big {
    height:120px;
}

.small{
    height:50px;
}

<div class="content">
    <div class="article big">
        n
    </div>
    <div class="article regular">
        n-1
    </div>
    <div class="article big">
        n-2
    </div>
    <div class="article small">
        n-3
    </div>
    <div class="article big">
        n-4
    </div>
    <div class="article regular">
        n-5
    </div>
    <div class="article small">
        n-6
    </div>
</div>

Answer 1

列数始终按照您当前的布局对其进行排序。如果您想实现预期的布局，则必须使用 float:left。检查附加的代码片段:

.content{
    width: 100%;
}

.article{
    float: left;
    width: 50%;
} 

<div class="content">
    <div class="article">
        n
    </div>
    <div class="article">
        n-1
    </div>
    <div class="article">
        n-2
    </div>
    <div class="article">
        n-3
    </div>
    <div class="article">
        n-4
    </div>
    <div class="article">
        n-5
    </div>
    <div class="article">
        n-6
    </div>
</div>