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

我有以下随机生成的div元素，因此无法对单个div元素进行更改。这是我需要的

html

---

要针对第一个div，您可以使用：

针对第一部门的img：

.relatedposts div.relatedthumb:first-child img

---

也许你可以这样做，但缺点是你需要一个固定的高度

*{
保证金：0；
填充：0；
框大小：边框框；
}
.相关职位{
显示：表格；
宽度：1024px；
高度：256px；
字号：0；
/*固定直列间隙*/
保证金：0自动；
}
.亲缘拇指{
浮动：左；
位置：相对位置；
文本对齐：居中；
宽度：23%；
高度：250px；
溢出：隐藏；
利润率：10px1%；
}
.相关帖子.相关大拇指：第一个孩子{
宽度：48%；
高度：520px；
}
.相关拇指img{
显示：块；
保证金：0自动；
身高：100%；
宽度：自动；
}
.贾斯汀封面{
颜色：#fff；
字体大小：30px；
字号：500；
宽度：100%；
位置：绝对位置；
底部：0；
左：0；
背景：rgba（0,0,0,0.5）；
填充：10px；
过渡：均为0.5s；
文本对齐：左对齐；
}

让我们来做这件事
让我们来做这件事
让我们来做这件事
让我们来做这件事
这一条显然有太多不合适的线

我想这就是你想要的：

HTML:

---

勾选这个：无法理解你想要实现什么。Hi@turtle-在你建议的布局中，你有1个大图像和4个小图像，但在你的代码中，你有6个图像。请你澄清一下好吗？谢谢。问题是所有的图像都是用同一个类随机生成的，所以我不知道如何对单个元素进行更改，我需要调整第一个div的大小，并相应地重新排列剩余的div，好的，我想我可以处理这个问题。接下来是答案。。。

 *{
 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;
 }

/*This one target the first div with class relatedthumb that is child div of an element with class relatedposts */
.relatedposts div.relatedthumb:first-child

.relatedposts div.relatedthumb:first-child img

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

*{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;
}