Как предотвратить выравнивание других элементов вправо, когда один элемент перемещается влево?

Question

[EDIT] Благодаря herkulano и GerManson , чьи исправления сработали для меня.

Но я не могу решить, что лучше, надежнее и кросс-браузерно совместимо? "overflow" или "clearfix:? Пожалуйста, помогите мне с этим, и я готов идти.

---

Если мой вопрос неясен, то будет, сейчас. Просто прочитайте, пожалуйста ...

(Я пытаюсь отобразить некоторые миниатюры в php, и это соответствующие коды, которые я использую.)

1. Ниже приводится код CSS, который я использую:

#gallerythumbnailsx { margin: 10px; }
#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }
#gallerythumbnailsx img { border: 2px solid #cfcfcf; margin-left: 5px; }
#gallerythumbnailsx .gallery-caption { margin-left: 0; }

2. связанный php-код:

<div id="gallerythumbnailsx"><?php echo show_all_thumbs(); ?></div>
<p>Aahan is great!</p>

3. Вот как отображается результирующий HTML:

<div id="gallerythumbnailsx">
    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx.jpg"></a>
        </dt>
    </dl>

    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx1.jpg"></a>
        </dt>
    </dl>

    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx3.jpg"></a>
        </dt>
    </dl>
</div>

К сожалению, именно так оно и отображается ( снимок экрана ). Проблема, как вы можете видеть, заключается в том, что текст "Ахан - это здорово!" выталкивается справа от миниатюр, так как я использую float: left для миниатюр в CSS. Я хочу текст в новой строке.

Answer 1

добавить p{clear:left;} к вашему CSS

потрясающая статья, объясняющая все поплавки

Добавлено JSFiddle для вас

При этом используется существующий CSS (ну, игнорируются #gallerythumbnailsx .gallery-caption { margin-left: 0; } и #gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }, так как я не понимаю, зачем вам они нужны.

Answer 2

Другой способ - использовать метод clearfix на #gallerythumbnailsx, это кросс-браузер, и таким образом вы можете использовать его в другом месте, просто добавьте класс clearfix, где вы используете float.

Я сделал рабочий пример:http://jsfiddle.net/XhRk6/

Класс утилит .clearfix был взят из: http://html5boilerplate.com/

Answer 3

Это исправит, надеюсь

#gallerythumbnailsx { margin: 10px; overflow: auto; }