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

我在我的网站上的一个页面上使用wordpress，css列来显示其子页面上的一些内容。我的所有页面标题都显示在2列，alpahbeticaly。使用多列css从左到右，而不是从上到下

是这样的：

第1列|第2栏

页面标题A | Page Title F

Page Title B | Page Title G

Page Title C |页标题H

页面标题D |页面标题I

页面标题E |页面标题Ĵ

这里是我的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 | Page Title F

Page Title G | Page Title H

Page Title I |页标题J

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

非常感谢您的帮助

来源

2014-02-16 mmdwc

你有一个在线的例子吗？这应该可以工作，但它听起来像你有其他规则干扰。您也可以暂时禁用列宽和边框，以查看是否因为所有宽度的总和超过100％而导致问题。 – jeroen

我不确定色谱柱是否是正确的解决方案。为什么不在这里使用简单的html表格？或者只是'跨度'那条线破坏每一个第二个元素？ – grmmph

你不应该使用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>

来源

2014-02-16 22:31:41 rocknrollcanneverdie

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

的一点是，我想用列在两列之间有一个边界和一个间隔，但不在第二列的右侧。我发现了另一种解决方案，其中包含float left，border-right和：n-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}

来源

2014-02-17 09:39:52 mmdwc

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

回答

相关问题