在 HTML 中分两列显示 Feed

Question

所以我有一个博客 post 供稿。我希望提要显示在我的主页上，分为两列。

-----------------------
Recent     | 4th Recent
2nd Recent | 5th Recent
3rd Recent | 6th Recent
-----------------------

我正在使用来自 http://materializecss.com 的 Material 设计，并成功获得了提要。问题只是将它对齐成两列。

这里是 HTML 代码，它允许我在单个列中显示项目。

<table id="blogPostTable"><tbody id="blogPostBody"></tbody></table>

这里是 JavaScript:

<script>
$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "http://www.foxinflame.tk/blog/feed/",
    dataType: "xml",
    success: function (xml) {
      $(xml).find("item").each(function () {
        var title = $(this).find("title").text();
        var description = $(this).find("description").text();
        var comments = +($(this).find("slash:comments").text());
        var pubDate = $(this).find("pubDate").text();
        $("#blogPostTable").append("<tr class=\"blogpostTR\"><td class=\"z-depth-1 blogpost\"><h5>"+title+"</h5><p>"+description+"<br><i>"+comments+" Comments. Published "+pubDate+"</i></p></td></tr>");
      });
    }
  });
})
</script>

这里是 CSS

#blogPostTable {
  border-collapse: separate;
  border-spacing: 20px;
}
.blogpost {
  color: black;
  background-color: #dedede;
}
.blogpostTR:nth-child(n+4){
  display:none;
}

CSS 允许我最多只显示 3 个，因为太多只会造成混乱。

因此，对于我当前的 JavaScript，它会为每个博客在其中生成一个 TR 和一个 TDpost。如果我在其中添加另一个 TD 元素，网格的顺序将不同。

现在，如何按照指定的顺序将其分成 2 列？我想我应该从 CSS 开始，将 nth-child 改为 7...?

Answer 1

如果你可以使用CSS3，那么就有一个按你需要的方式拆分段落的功能。

最好和最干净的方法是像这样构造：

<div id="collection">
    <div>title,description,comments</div>
    ....
    </div>

并根据 w3schools 的示例将该规则应用于 ID 集合。表格不起作用。

Answer 2

一种方法是像这样制作一行：

<div class="row">
    <div class="col s6"></div>
    <div class="col s6"></div>
</div>

然后用帖子填充列。继续向第一列添加帖子，当它已满时开始填充第二列。如果您有 10 个帖子并且想在第一个中放置 5 个，一个简单的方法是在成功函数中添加一个计数器，如果 < 5 则附加到第 1 列，否则附加到第 2 列。

（没有使用过实体化，所以不确定 s6 是否正确 class 或者您是否需要其他东西，但想法是分成 2 列，每列 6 个网格列宽。）

那么您也可以去掉 table，但是如果您还需要帖子垂直对齐，这将不起作用。

在 HTML 中分两列显示 Feed

Show Feed in two columns in HTML

javascript

html

css

html-table

feed