Блог

Главная - Вопросы по программированию - Проблема с `float: left;`

Проблема с `float: left;`

#html #css

#HTML #css

Вопрос:

Пожалуйста, посмотрите на эту скрипку.

По сути, у меня есть два divs, которые имеют float: left; и разделены a <br/> . Проблема в том, что div буквы s отображаются одна рядом с другой, вместо того чтобы отображаться одна под другой, с пробелом между ними.

Комментарии:

1. Вот как работают плавающие элементы. Если вы хотите, чтобы они отображались один под другим, почему вы их разместили?

2. alistapart.com/articles/css-floats-101

3. зачем вам float: left;? работает нормально, если вы не укажете на них максимальную ширину, все должно быть в порядке

4. Причина, по которой я использую «float: left», заключается в том, что синяя граница «плотно прилегает» к тексту (без пробелов).

Ответ №1:

Вам нужно clear: left , и вы можете использовать margin-bottom:1em , чтобы указать промежуток между ними, если хотите. http://jsfiddle.net/zn5wA/1 /

С float:left <br> помощью просто появится рядом с элементами, которые являются плавающими.

Ответ №2:

Если вы хотите, чтобы они отображались друг под другом, не используйте float:left;

http://jsfiddle.net/XcV2v/2/

В качестве альтернативы, вы можете использовать clear:both , но если вам это не нужно float:left , то было бы проще удалить это

Комментарии:

1. Причина, по которой я использую «float: left», заключается в том, что синяя граница «плотно прилегает» к тексту (без пробелов).

2. Ах, хорошо, в этом случае вы можете использовать clear:both для принудительного размещения div друг под другом 🙂

Ответ №3:

Вам просто нужно их очистить.

Добавить clear:both; 

 .container {
    float: left;
    border: solid 2px blue;
    clear:both;
}

Пример: http://jsfiddle.net/XcV2v/1 /

Ответ №4:

Сначала вам нужно очистить первый поплавок, чтобы поместить другой поплавок.

следующее может помочь вам:

 <div id='div1' style=float:left>
....
</div>

<div style=clear:left></div>

<div id='div2' style=float:left>
...
</div>
Метки: