html - 使用表格和 float 排列 div 元素

Question

我有以下随机生成的 div 元素，因此我无法更改单个 div 元素。这是示例 http://jsfiddle.net/y638o46h/2/ .这是我需要的http://prntscr.com/5i5vz3 .

html

<div class="relatedposts">
<div class="relatedthumb">
 <img src="" >
    <h3 class="justin-cover">Lets make this work</h3>
 </div>
 <div class="relatedthumb">
 <img src="" >
     <h3 class="justin-cover">Lets make this work</h3>
 </div>
 <div class="relatedthumb">
 <img src="" >
     <h3 class="justin-cover">Lets make this work</h3>
 </div>
 <div class="relatedthumb">
 <img src="" >
     <h3 class="justin-cover">Lets make this work</h3>
 </div>
 <div class="relatedthumb">
 <img src="" >
     <h3 class="justin-cover">Lets make this work</h3>
 </div>
 <div class="relatedthumb">
 <img src="" >
    <h3 class="justin-cover">This one clearly has too many lines that do not fit</h3>
 </div>  

CSS

 *{
 margin: 0;
 padding: 0;
 box-sizing: border-box;}

 .relatedposts {
 display:table; 
 width:1024px;font-size: 0;
 /* fix inline gap */
 margin: 0 auto;}

.relatedthumb {
 float: left;
  margin-left:5px;
 position: relative;
 margin-bottom:10px;
 }

.relatedthumb img {
 text-align:center;
 }

.justin-cover {
 color: #fff;
 font-size: 30px;
 font-weight: 500;
 /* height: 30%; */
 width: 100%;
 position: absolute;
 bottom: 0;
 left:0;
 background: rgba(0,0,0,0.5);
 padding: 10px;
 transition: all 0.5s;
 }

Answer 1

要定位第一个 div，您可以使用 :first-child :

/*This one target the first div with class relatedthumb that is child div of an element with class relatedposts */
.relatedposts div.relatedthumb:first-child

要定位第一个 div 的 img:

.relatedposts div.relatedthumb:first-child img