0

嘿，我用 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;
}

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

4

2 回答 2

4

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

h4 { 
  -moz-column-break-before : always;
  -webkit-column-break-before : always;
}
于 2011-01-15T19:48:21.163 回答
1

然后你不需要列。你只是把链接一个接一个。

一种解决方案是设置包含元素并具有浮点数的元素的宽度：left;。然后确保每三个元素（例如），转到下一行。

可能还有其他例子。

于 2011-01-15T19:49:15.363 回答