使用表和浮点数排列div元素

Question

I have the following div elements that are generated randomly so I can't make changes to a single div element.Here is the example http://jsfiddle.net/y638o46h/2/ . Here is what I need 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

To target the first div you can use :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

To target the img of the first div:

.relatedposts div.relatedthumb:first-child img

Answer 2

Maybe you can do something like this, but the downfall is that you need a fixed height

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

I guess this is what you're looking for : 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;
}