php - 从左到右而不是从上到下使用多列 css

Question

我在我网站上的 wordpress 页面上使用 css 列来显示其子页面中的一些内容。我所有的页面标题都显示在 2 列中，alpahbeticaly。

像这样:

第 1 栏 |第 2 列

页面标题 A |页面标题 F

页面标题 B |页面标题 G

页面标题 C |页面标题 H

页面标题 D |页面标题一

页面标题 E |页面标题 J

这是我的 html 和 php :

<div class="column_artists_menu">

            <?php

            $args = array(
            'post_type'      => 'page',     
            'post_parent'    => $post->ID,
            'order'          => 'ASC',
            'orderby'        => 'title',
            'post_status'   => 'publish',
            'posts_per_page' => -1,
            );

            $parent = new WP_Query( $args );

            if ( $parent->have_posts() ) : ?>

            <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>



            <h1><?php the_title(); ?></h1>



                <?php endwhile; ?>

                <?php endif; wp_reset_query(); ?>
</div>

和我的 CSS :

.column_artists_menu{
-moz-column-width: 50%;
-webkit-column-width: 50%;
-o-column-width: 50%;
column-width: 50%;
-moz-column-count: 2;
-webkit-column-count: 2;
-o-column-count: 2;
column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule-width: 1px;
-webkit-column-rule-color: #eeeeee;
-webkit-column-rule-style: solid;
-moz-column-rule-width: 1px;
-moz-column-rule-color: #eeeeee;
-moz-column-rule-style: solid;
-o-column-rule-width: 1px;
-o-column-rule-color: #eeeeee;
-o-column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: #eeeeee;
column-rule-style: solid;
}

它完美地工作。但是我的页面是从上到下排序的，就像上表一样。我想要做的是让我的页面标题像这样从左到右显示。

第 1 栏 |第 2 列

页面标题 A |页面标题B

页面标题 C |页面标题D

页面标题 E |页面标题 F

页面标题 G |页面标题 H

页面标题 I |页面标题 J

有没有办法做到这一点并使用非常有用的 css 列？

非常感谢你的帮助

Answer 1

谢谢大家的回复，但我知道如何使用表格...;-)

关键是我想使用 column 在两列之间有一个边框和一个间隙，但不是在第二列的右侧。我找到了另一个解决方案，左浮动，右边框和 :nth-child(even) 没有边框。如果有人需要，这是我的代码:

.div1{
width: 470px;
float: left;
padding-right: 9px;
border-right: 1px solid #eeeeee;}

.div1:nth-child(even){padding-right: 0px;
border-right: none;padding-left: 10px}