在HTML中以兩列顯示Feed

所以我有一個博客文章源。我希望Feed在我的主頁中出現在兩列中。在HTML中以兩列顯示Feed

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

我使用的材料設計從http://materializecss.com，併成功地得到了飼料。問題只是將它對齊到兩列。

以下是允許我在單個列中顯示項目的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和一個TD。如果我在其中添加另一個TD元素，網格的順序將會不同。

現在，我該如何使它成爲2列，與指定的順序？我想我應該從CSS開始，將第n個孩子改爲7 ...？

來源

2015-10-21 FoxInFlame

的一種方法是使一排這樣的：

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

再與職位的欄。繼續向第一列添加帖子，並在完整時開始填寫第二欄。如果你有10個帖子，並且想要在第一個簡單的方法中添加5個，那麼在成功函數中添加一個計數器並追加到第1列（如果是< 5），否則添加第2列。

（沒有用過物化所以不知道S6是正確的類，或者如果你需要其他成才但這個想法是分割成2列，每列6周格的cols寬。）

那麼你就可以擺脫該表也是，但如果您需要垂直對齊的帖子，這也不起作用。

來源

2015-10-21 18:51:14 sharpweed

工作。驚人！我將'each（function（）{...}）'改爲'each（function（eachCounter）{if（eachCounter> 2 {] else {] ...}）' – FoxInFlame

-2

如果你可以使用CSS3，那麼有一個函數可以按你需要的方式分割段落。

最好的和最徹底的方法是結構是這樣的：

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

，並基於例如W3Schools的的適用該規則的ID集合。表格不起作用。

來源

2015-10-21 18:20:46

是的，我可以使用CSS3。 – FoxInFlame

有點像什麼？也許編輯你的答案。 – FoxInFlame

在HTML中以兩列顯示Feed

回答

相關問題