使用CSS表格排列div

Question

我有4種div元素和我需要安排在一行和在第二row.The接下來的兩個前兩個div元素被在一個循環中被生成，以便不能訪問每個individually.So，我嘗試使用:nth-child屬性，但無法解決。以下是代碼示例。 的jsfiddle

HTML

<div class="relatedposts">
 <div class="relatedthumb">
    <img src="http://placekitten.com/120/60" ><br>
        <p>Post to check the page builder plugin</p>
 </div>
 <div class="relatedthumb">
    <img src="http://placekitten.com/120/60" ><br>
        <p>Post to check the page builder plugin and now the second line here ok
 </div>
 <div class="relatedthumb">
    <img src="http://placekitten.com/120/60" ><br>
        <p>Post to check the page builder plugin</p>
 </div>
 <div class="relatedthumb">
    <img src="http://placekitten.com/120/60" ><br>
        <p>Post to check the page builder plugindskjnfkdjndskjcndskjcndsk
 </div>

CSS

    .relatedposts{display:table;}
.relatedthumb {
display: inline-block;
    width:40%;
}
.relatedthumb img{text-align:center;}
div.relatedthumb:nth-child(2n+1){
    display:table-row;
}

Answer 1

您不需要CSS表。

我已經更新了您的代碼，以使用floats和clear代替CSS表：

.relatedposts {
    display:table; 
}
.relatedthumb {
    width:40%;
    float: left;
}
.relatedthumb img {
    text-align:center;
}
div.relatedthumb:nth-child(2n+1) {
    clear: left;
}

Answer 2

您剛剛將CSS屬性分配給了錯誤的div。 將其分配給父div即可使用。

div.relatedposts:nth-child(2n+1){
    display:table-row;
}