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

Answer 2

也许你可以做这样的事情，但失败的是你需要一个固定的高度

jsfiddle

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.relatedposts {
    display:table; 
	width:1024px;
    height: 256px;
    font-size: 0;
    /* fix inline gap */
    margin: 0 auto; 
}
.relatedthumb {
    float: left;	
	position: relative;	
    text-align: center;
    width: 23%;
    height: 250px;
    overflow: hidden;
    margin: 10px 1%;
}
.relatedposts .relatedthumb:first-child{
    width: 48%;
    height: 520px;
}
.relatedthumb img{
    display: block;
    margin: 0 auto;
    height: 100%;
     width: auto;
}
.justin-cover {
    color: #fff;
    font-size: 30px;
    font-weight: 500;    
    width: 100%;
    position: absolute;
    bottom: 0;
    left:0;
    background: rgba(0,0,0,0.5);
	padding: 10px;
	transition: all 0.5s;
    text-align: left;
}

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

Answer 3

我想这就是你要找的东西：Click Here

HTML：

<section class="page">
    <div class="left"></div>
    <div class="container">
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
    </div>
</section>

CSS：

*{box-sizing: border-box;}


body {
    margin:20px
}
.left, .obj {
    border: 2px solid gainsboro;
    margin:2px;
}
.container {
    float: left;
    height: 300px;
    width: 300px;
    background: red;
    margin:2px;
}
.left {
    float:left;
    height: 300px;
    width: 300px;
}
.obj {
    height: 146px;
    width: 146px;
    float: left;
}