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

Answer 2

那么你就不需要列了。您只需将链接一个接一个地放置即可。

一种解决方案是设置包含元素并具有 float: left; 的元素的宽度。然后，确保每三个元素（例如）进入下一行。

可能还有其他例子。