[英]Arranging div elements using css floats
我有以下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;
}
您可以在CSS中嘗試類似的方法:
.relatedthumb:first-child img {
height: 300px; /* with your desire size */
width:300px; /* with your desire size */
}
在這里, :first-child
將只針對第一個元素。
如我所知,您需要那些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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.