使用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;
}