HTML、CSS：我如何合並這些 div 以便在他們的孩子上使用 float:left 屬性？

Question

我有 2 組縮略圖，在每組縮略圖中，我使用 float:left 在 4 列中將它們顯示在彼此附近。

我想“合並”兩組（但我無法更改 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&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/lancelmaat/content/stalkshow&quot; id=&quot;node_link_text&quot; class=&quot;active&quot;&gt;View Image Details&lt;/a&gt;]" 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&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/lancelmaat/content/stalkshow&quot; id=&quot;node_link_text&quot; class=&quot;active&quot;&gt;View Image Details&lt;/a&gt;]" 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&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/lancelmaat/content/stalkshow&quot; id=&quot;node_link_text&quot; class=&quot;active&quot;&gt;View Image Details&lt;/a&gt;]" 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&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/lancelmaat/content/stalkshow&quot; id=&quot;node_link_text&quot; class=&quot;active&quot;&gt;View Image Details&lt;/a&gt;]" 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&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/lancelmaat/content/stalkshow&quot; id=&quot;node_link_text&quot; class=&quot;active&quot;&gt;View Image Details&lt;/a&gt;]" 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&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/lancelmaat/content/stalkshow&quot; id=&quot;node_link_text&quot; class=&quot;active&quot;&gt;View Image Details&lt;/a&gt;]" 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屬性？

謝謝

Answer 1

如果您想為孩子們使用的選擇器添加屬性

.field-items *
{
    float: left;
}

通配符選擇器*將選擇所有字段項類的子項。 現在這可能不是問題的最終解決方案，但至少是一個開始。

Answer 2

這是你要找的嗎？ 我不完全明白，但我認為這可能會讓你朝着正確的方向前進......

<!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>

在瀏覽器中你嘿是這樣的：

_{（來源： leguen.ca ）}

然而，這項工作基於所有縮略圖都是 89 像素 x 89 像素的假設。 此外，您必須確保類field-items任何元素都沒有 CSS 屬性overflow-y:hidden 。