使用CSS浮点数排列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将只针对第一个元素。

Answer 2

如我所知，您需要那些div根据数字来表示不同的内容。

示例：第一个图像红色边框和第四个蓝色边框

您可以使用jQuery来解决这个问题

你可以设置两个班级

class="relatedthumb special"

对于div，您要使其特别

$(".specail").css("border","red")

如果不是您要寻找的解决方案，请多解释一下您的问题

或者你也可以不用上课：

var count = 0;

$( "#relatedthumb " ).each(function( i ) {
    if(count%4 == 0)
    {
       this.style.width= "400";
       this.style.height= "400";
     }
     count++;
  });

因此，每个迭代中的第一张图片的尺寸为400 * 400