我有以下随机生成的 div 元素,因此我无法更改单个 div 元素。这是示例 http://jsfiddle.net/y638o46h/2/ .这是我需要的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;
}
最佳答案
要定位第一个 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 - 使用表格和 float 排列 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27546211/