HTML, CSS: how can I merge these divs in order to use float:left property on their children?
I've 2 sets of thumbnails and in each set I'm displaying them one nearby each other in 4 columns using float:left.
I would like to "merge" the 2 sets (but I cannot change the html code) because I want the thumbnails of the second set floating right after the last thumbnail of the first set.
In other terms, if in the last row there are only 2 thumbnails and the last 2 columns are empty, the thumbnails of the second set should fill the empty columns of the last row of the first set.
This is the code...
<div class="field field-type-filefield field-field-image">
<div class="field-items">
<div class="field-item odd">
<a rel="lightbox[field_image][First image<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/images/LPrisPetjong.jpeg" class="lightbox-processed"><img width="89" height="89" title="" alt="First image" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryImage/files/projects/Stalkshow/images/LPrisPetjong.jpeg"></a> </div>
<div class="field-item even">
<a rel="lightbox[field_image][Second image<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/images/SeoulLEDScreen2a.jpeg" class="lightbox-processed"><img width="89" height="89" title="" alt="Second image" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryImage/files/projects/Stalkshow/images/SeoulLEDScreen2a.jpeg"></a> </div>
<div class="field-item odd">
<a rel="lightbox[field_image][Third image<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/images/SeoulSKT6.jpeg" class="lightbox-processed"><img width="89" height="89" title="" alt="Third image" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryImage/files/projects/Stalkshow/images/SeoulSKT6.jpeg"></a> </div>
</div>
<!-- second set -->
<div class="field field-type-filefield field-field-video">
<div class="field-items">
<div class="field-item odd">
<a rel="lightbox[field_video][Video Number 1<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/videos/StalkSeoul8d1Mbps.flv" class="lightbox-processed"><img title="" alt="Video Number 1" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryVideo/files/projects/Stalkshow/videos/StalkSeoul8d1Mbps.flv"></a> </div>
<div class="field-item even">
<a rel="light开发者_运维知识库box[field_video][Video Number 2<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/videos/stalkshowdvd21Mbps.flv" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryVideo/files/projects/Stalkshow/videos/stalkshowdvd21Mbps.flv"></a> </div>
<div class="field-item odd">
<a rel="lightbox[field_video][Video Number 3<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/videos/StalkShowMoscow1Mbps.flv" class="lightbox-processed"><img title="" alt="Video Number 3" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryVideo/files/projects/Stalkshow/videos/StalkShowMoscow1Mbps.flv"></a> </div>
</div>
</div>
How can I merge these divs in order to use float:left property on their children ?
thanks
Is this what you're looking for? I don't fully understand but I'm thinking this might send you in the right direction...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example - Thumbnails in 4 columns</title>
<style>
<!--
.field-items {
width:380px; /* 4 columns x 95px columns...
each column is an 89px thumbnail and 6px of border */
}
.field-items a {
float:left;
text-decoration:none;
}
/* Just for demo purposes */
.set-1 img {
border:3px solid red;
}
.set-2 img {
border:3px solid green;
}
.set-3 img {
border:3px solid blue;
}
-->
</style>
</head>
<body>
<div class="field field-type-filefield field-field-image set-1">
<div class="field-items">
<div class="field-item odd">
<a href="#" class="lightbox-processed"><img width="89" height="89" title="" alt="First image" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
<div class="field-item even">
<a href="#" class="lightbox-processed"><img width="89" height="89" title="" alt="Second image" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
<div class="field-item odd">
<a href="#" class="lightbox-processed"><img width="89" height="89" title="" alt="Third image" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
</div>
</div>
<!-- second set -->
<div class="field field-type-filefield field-field-video set-2">
<div class="field-items">
<div class="field-item odd">
<a href="#" class="lightbox-processed"><img title="" alt="Video Number 1" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
<div class="field-item even">
<a href="#" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
<div class="field-item odd">
<a href="#" class="lightbox-processed"><img title="" alt="Video Number 3" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
<div class="field-item even">
<a href="#" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
</div>
</div>
<!-- third set -->
<div class="field field-type-filefield field-field-video set-3">
<div class="field-items">
<div class="field-item odd">
<a href="#" class="lightbox-processed"><img title="" alt="Video Number 1" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
<div class="field-item even">
<a href="#" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
<div class="field-item odd">
<a href="#" class="lightbox-processed"><img title="" alt="Video Number 3" src="http://richard.jp.leguen.ca/images/lenna.jpg"></a>
</div>
</div>
</div>
</body>
</html>
In-browser you hey something like this:
(source: leguen.ca)
This working, however, rests upon the assumption that all thumbnails will be 89px by 89px. Aditionally, you have to make sure that any element of class field-items does not have the CSS property overflow-y:hidden.
If you're looking to add properties to a selectors children use
.field-items *
{
float: left;
}
The wildcard selector * will select all of the field-items class' children. Now this may not be a final solution to the problem, but it's at least a start.
加载中,请稍侯......
精彩评论