Question

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

像这样：

第1栏|第2栏

页面标题A |页面标题F

页面标题B |页面标题G

页面标题C |页面标题H

页面标题D |页面标题I

页面标题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

您不应该将CSS3列用于此布局。例如，改为使用“rows”：

<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>

Answer 2

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

关键是我想使用列在两列之间有一个边框和一个间隙，但不是在第二列的右边。我找到了另一种解决方案，左边是浮动，右边是边框，而且是：nth-child（偶数）没有边框。如果有人需要，这是我的代码：

.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}

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

2 个答案: