Обертывание тегов span внутри div

У меня есть пара тегов div, вложенных друг в друга, и несколько тегов span, как показано ниже: -

<div id="leftcol">
    <div id="tagcloud">
        <span class="mytags"><a href="">tag1</a></span>
        <span class="mytags"><a href="">tag2</a></span>
        <!-- and a few more spans of the same type -->
    </div>
</div>

Теперь проблема в том, что span-ы переполняют свой тег div контейнера. Может ли кто-нибудь проявить любезность и сообщить мне, как обернуть эти промежутки внутри своего контейнера div (здесь div с id tagcloud). Оба внешних элемента имеют указанную ширину 300 пикселей.

(Дополнительная информация - Я сделал сброс CSS, используя YUI reset-fonts-grids. Я просто привыкаю к ​​CSS ..) Редактировать: -Сайт можно посмотреть на frekshrek.appspot.com ... облако тегов просто не переносится внутри контейнера

 Valentin Flachsel26 сент. 2010 г., 12:18
Размещение вашего CSS также очень поможет.

Ответы на вопрос(4)

будто вы перемещаете пролеты внутри контейнера div. Если дело обстоит именно так, и вы хотите, чтобы tagcloud содержала (обертывала) всплывающие промежутки, тогда вам нужно очистить поплавки, добавив следующее в CSS tagcloud:

div.tagcloud {
    overflow: auto;
    width: 100%;
}

Объяснение этой техники можно найти здесь:http://www.quirksmode.org/css/clearing.html

 rubicondude26 сент. 2010 г., 12:35
Нет, я не плаваю пролетами внутри вообще. Единственный css, который применяется там, устанавливает ширину внешних двух элементов div и шрифт тегов span. Вот и все. Хотя приведенное выше решение помогает разместить промежуток внутри div, оно создает полосу прокрутки внизу. Он не переносит диапазон от одной строки к другой ниже, когда ширина будет превышена
Решение Вопроса

Попробуйте объявитьfloat: left; на.mytagcloud учебный класс. Что-то вроде:

.mytagcloud{
    float: left;
    margin: 5px;
    font-family: 'Reenie Beanie', arial, serif;
}

в вашемbasiclayout.css файл, строка 71.

 David Brossard10 февр. 2018 г., 01:42
не уверен, что это все еще применимо ... не работает для меня
 Valentin Flachsel26 сент. 2010 г., 21:09
@orokusaki:margin свойство уже было в CSS-файле @ rubicondude, но спасибо за внимание. На той же ноте, мы серьезноеще должен поддерживать IE6?
 orokusaki26 сент. 2010 г., 20:40
@rubic @Freek - не стоит использоватьmargin: 5px; на любом плавающем элементе. В IE6 вступает в силу ошибка с полем с плавающей запятой. Я бы придерживалсяpadding: 5px;, или жеmargin: 5px 5px 5px 0;.
 Valentin Flachsel12 февр. 2018 г., 19:11
Плавающие элементы @DavidBrossard по-прежнему плавают, что не изменилось за очень долгое время, поскольку это свойство CSS 2.1 и эффективно поддерживается всеми браузерами. Должно быть что-то еще, что мешает этому работать с вашей стороны.
 David Brossard12 февр. 2018 г., 19:40
Как и в случае с CSS, вероятно, есть :-) Спасибо за обновление. Я думаю, моя проблема в том, что родительский элемент div - это тд, который может расти бесконечно. Нет причин останавливать DIV

поэтому браузер видит их все как одно длинное слово. Если вы добавите один пробел или разрыв строки между каждым интервалом, они будут обрабатываться как отдельные слова и переноситься соответственно.

 rubicondude26 сент. 2010 г., 13:09
Я не смогу сделать этого, Саймон, так как я использую там какие-то помощники по HTML. Все, что я должен был бы сделать, должно быть в файле CSS. Какую строку вы говорите о FreekOne. Было бы очень полезно, если бы что-то подобное сработало!
 Valentin Flachsel26 сент. 2010 г., 13:04
Разве не было бы намного проще просто добавить одну строку в файл CSS?
 Valentin Flachsel26 сент. 2010 г., 12:42
Вы всегда можете отредактировать свой первый ответ и либо добавить обновление, либо полностью заменить первоначальный. Помогает сохранить раздел ответов в чистоте;)
 rubicondude26 сент. 2010 г., 12:51
Был бы какой-то другой способ, поскольку я генерирую теги span динамически через цикл for на сервере, заключая их в div и отправляя его. Не могу найти способ добавления пробелов между ними
 Simon Dyson26 сент. 2010 г., 12:55
В вашем цикле for вы можете попробовать добавить '& nbsp;' сразу после закрывающего тега span. Это HTML-сущность для неразрывного пробела. Например, сервер должен вернуть что-то вроде: <span> ... </ span> & nbsp; <span> ... </ span>

.mytags {
   display:inline-block;
}
 Aamir Mahmood29 янв. 2013 г., 15:51
+1, когда поплавок влево вызывает искажение макета, используйте это

Ваш ответ на вопрос