HTML, CSS: как я могу объединить эти div, чтобы использовать свойство float: left для своих детей?

Question

У меня есть 2 набора миниатюр, и в каждом из них я отображаю их один рядом друг с другом в 4 столбцах, используя float: left.

Я хотел бы «объединить» 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&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

Это то, что вы ищете? Я не совсем понимаю, но я думаю, что это может направить вас в правильном направлении ...

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

В браузере у вас есть что-то вроде этого:

Эта работа, однако, основана на предположении, что все миниатюры будут иметь размеры 89 на 89 пикселей. Кроме того, вы должны убедиться, что ни один элемент класса field-items не имеет свойства CSS overflow-y:hidden.

Answer 2

Если вы хотите добавить свойства в селекторы, дети используют

.field-items *
{
    float: left;
}

Селектор подстановки * выберет все дочерние элементы класса field-items. Теперь это может быть не окончательное решение проблемы, но это, по крайней мере, начало.