HTML，CSS：我如何合并这些div以便在他们的孩子身上使用float：left属性？
我有2组缩略图，在每组中我使用float：left在4列中将它们显示为彼此相邻。
我想“合并”2套（但我无法更改html代码），因为我希望第二组的缩略图在第一组的最后一个缩略图之后浮动。
换句话说，如果在最后一行只有2个缩略图而最后2列是空的，则第二组的缩略图应该填充第一组最后一行的空列。
这是代码......
<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="lightbox[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>
如何合并这些div以便在他们的孩子身上使用 float：left 属性？
感谢
2 个答案:
答案 0 :(得分：0)
如果您要为选择器添加属性，请使用
.field-items *
{
float: left;
}
通配符选择器*将选择所有field-items类的子项。现在这可能不是问题的最终解决方案，但它至少是一个开始。
答案 1 :(得分：0)
这是你要找的吗？我不完全明白，但我认为这可能会让你朝着正确的方向前进......
<!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>
在浏览器中你嘿嘿这样：
然而，这个工作依赖于所有缩略图将是89px乘89px的假设。另外，您必须确保类field-items的任何元素都没有CSS属性overflow-y:hidden。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？