使用表和浮点数排列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