Плавающие DIVs не текут должным образом

Question

Я работаю над фотогалереей, каждый эскиз находится в своем собственном DIV и перемещен влево в содержащем DIV. Он отображался правильно до тех пор, пока вертикальные миниатюры не вошли в уравнение. Теперь, когда должна начаться следующая строка, первый элемент следующей строки находится слева от последнего вертикального DIV (миниатюра), а не слева от содержащего DIV.

альтернативный текст http://tapp -essexvfd.org / images / capture1.jpg

Вот CSS:

#galleryBox {
        width: 650px;
        background: #fff;
        margin: auto;
        padding: 10px;
        text-align: center;
        overflow: auto;
    }
    .item {
        display: block;
        margin: 10px;
        padding: 20px 5px 5px 5px;
        float: left;
        background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
        }

и HTML:

<div id="galleryBox" class="ui-corner-all">
                <div id="file" class="ui-corner-all">
                    <form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
                        <p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
                        <p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
                        <p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
                    </form>
                    <a name="thumbs"></a>
                </div>
                <div class="item ui-corner-all">

                    <a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
                        <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
                    <p><span class="label">test1</span></p>
                </div>

                <div class="item ui-corner-all">
                    <a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
                        <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
                    <p><span class="label">test3</span></p>
                </div>
</div>

Answer 1

Вы можете использовать встроенные блоки, как описано в этой статье:

• Галерея миниатюр Inline-Block

Статья решает ту же самую проблему, с которой вы столкнулись, с миниатюрами.

Я также нашел этот простой пример с использованием миниатюр встроенного блока . Обратите внимание, как миниатюры красиво оборачиваются и остаются вертикально выровненными внутри своей линии.

---

UPDATE:

Вот еще одна подробная статья, которая решает эту проблему с помощью встроенного блока:

• Кросс-браузерный встроенный блок

Как вы можете заметить из этих статей, немного сложнее заставить его работать в разных браузерах.

Answer 2

вы можете попробовать использовать отображение таблиц CSS для ваших divs ... то есть.

#galleryBox {
    display: table;
    ...
}
.item {
    display: table-cell;
    ...
}
.row {
    display: table-row;
}

так что вам нужно будет добавить еще один div, чтобы обернуть элементы в каждом ряду

<div id="galleryBox">
    <div class="row">
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
    </div>
    <div class="row">
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
    </div>
</div>

Answer 3

Два варианта:

1. Установите максимальную высоту для миниатюр DIV, чтобы они правильно располагались, независимо от того, горизонтальны они или вертикальны.
2. Используйте «clear: left» для сброса поплавка на миниатюре DIV рядом с вертикалью.

Поведение по умолчанию выглядит правильным, основываясь на том, что происходит, когда текст обтекает плавающий DIV. Исходя из того, что вы пытаетесь сделать, я бы выбрал вариант № 1.