html - 使用 css 表格排列 div

Question

我有 4 个 div 元素，我需要将前两个排列在一行中，接下来的两个排列在第二行中。div 元素正在生成一个循环所以不能单独访问每个。所以，我尝试使用 :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 表格。

我已经 updated your code to use floats & clear而不是 CSS 表格:

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