使用多列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從左到右，而不是從上到下

回答

相關問題