HTML5、CSS3 栏目

发布于 2024-10-12 01:54:12 字数 1467 浏览 1 评论 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;
}

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

Hay all im building a news aggregator with SimplePie, the SP elements are working fine but I would like to have the feeds that it pulls in displayed in columns across the page using HTML5 and CSS3. I have managed to implement it so that the columns are formed and display the feeds, but at the moment the stories are being ordered one on to of the other from left to right with the newest being displayed top left, the second newest bellow the first in column one and so on. What I would like is for the stories to be displayed from left to right across the column so that the newest is at the top of the first column, the second newest at the top of the second column, the third newest in the third column and so on.

The code that Im using at the moment is as follows:

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

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

If anyone could help me out with this that would be great.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

蒲公英的约定 2024-10-19 01:54:12

你试图让 CSS3 列的行为像普通的 div,这会让你的 css 代码变得臃肿并且难以维护。但你想要一个答案,而不是讲座语义,所以解决方案是:

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

You're trying to make CSS3 columns behave like normal divs, this will bloat your css code and make it difficult to maintain. But you want an answer, not a lecture semantics, so the solution is:

h4 { 
  -moz-column-break-before : always;
  -webkit-column-break-before : always;
}
会发光的星星闪亮亮i 2024-10-19 01:54:12

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

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

可能还有其他例子。

Then you don't need columns. You juste put the links one after the other.

One solution would be to set the width of the elements that contain the elements and have a float: left;. Then you make sure that every three elements (for examples), you go to the next line.

There might be other examples.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文