html - 使用 css floats 排列 div 元素

Question

我有以下随机生成的 div 元素，因此我无法更改单个 div 元素。这是示例 http://jsfiddle.net/y638o46h/2/ .但是我需要一个特别的改变。我希望第一个和第四个帖子占用的空间由一个帖子占用。即第一个图像需要是其余图像的两倍。总共将渲染五张图像。我试过这样做，但不知道怎么做。

html

<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">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>   

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

你可以在 CSS 中尝试这样的事情:

.relatedthumb:first-child img {
    height: 300px;   /* with your desire size */
    width:300px;     /* with your desire size */
}

此处，:first-child 将仅针对第一个元素。