我有以下随机生成的div元素,因此不能更改单个div元素。这是我需要的http://jsfiddle.net/y638o46h/2/
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;
 }

最佳答案

要瞄准第一个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

关于html - 使用表格和浮点数排列div元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27546211/

10-09 15:22
查看更多