HTML5、CSS3 列

Question

干草我正在使用 SimplePie 构建新闻聚合器，SP 元素工作正常，但我希望使用 HTML5 和 CSS3 将它提取的提要显示在整个页面的列中。我已经设法实现它，以便形成列并显示提要，但目前故事正在从左到右一个接一个地排列，最新的显示在左上方，第二个最新的在第一个下面在第一列等等。我想要的是在整个列中从左到右显示故事，以便最新的在第一列的顶部，第二个最新的在第二列的顶部，第三个最新的在第三列和很快。

我目前使用的代码如下:

 <div id="page-wrap">




    <?php if ($feed->error): ?>
  <p><?php echo $feed->error; ?></p>
<?php endif; ?>

<?php foreach ($feed->get_items() as $item): ?>

    <div class="chunk">

      <h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>

      <p class="footnote">Source: <a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p>

    </div>

<?php endforeach; ?>

还有这个 CSS:

#page-wrap { 
width: 100%; 
margin: 25px auto; 
height:400px; 
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}

如果有人能帮我解决这个问题，那就太好了。

Answer 1

您试图让 CSS3 列的行为像普通的 div，这会使您的 CSS 代码膨胀并且难以维护。但是你想要一个答案，而不是讲座语义，所以解决方案是:

h4 { 
  -moz-column-break-before : always;
  -webkit-column-break-before : always;
}