从左到右使用多列css，而不是从上到下答案

【问题标题】：using multiple columns css from left to right, instead of top to bottom从左到右使用多列css，而不是从上到下
【发布时间】：2014-02-16 18:30:56
【问题描述】：

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

像这样：

第 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 列？

非常感谢您的帮助

【问题讨论】：

您有在线示例吗？这应该可行，但听起来您有其他规则干扰。您也可以暂时禁用列宽和边框，看看是否会导致问题，因为所有宽度的总和超过 100%。
我不确定列是否是正确的解决方案。为什么不在这里使用简单的 html table？或者只是spans 换行每隔一个元素？

标签： php css html wordpress multiple-columns

【解决方案1】：

您不应在此布局中使用 CSS3 列。例如，改用“行”：

<style>
.row > div {
    float: left;
}
</style>

<div class=“row”>
    <div>
        <h2>Page Title A</h2>
    </div>
    <div>
        <h2>Page Title B</h2>
    </div>
</div>
<div class=“row”>
    <div>
        <h2>Page Title C</h2>
    </div>
    <div>
        <h2>Page Title D</h2>
    </div>  
</div>

【讨论】：

【解决方案2】：

谢谢大家的回复，不过我知道怎么用table... ;-)

关键是我想使用 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}

【讨论】：