2012-05-08 4 views
0

Я делаю показ слов с тегом-облаком, каждый из которых содержится в маленьких div и плавает так, чтобы многие отображались на каждой строке , Однако, если я начинаю изменять размер шрифта в некоторых дивы, структура линии нарушается и появляются огромные пробелы, так как в этом скриншоте:Выравнивание/укладка большого количества небольших прямоугольников div-size по-разному

enter image description here

Может кто-нибудь предложить какие-либо рекомендации о том, как решить эту проблему ? Я не собираюсь ничего делать, например, иметь несколько строк меньших тегов вместе с большими: я просто хочу, чтобы divs подчинялись нормальной структуре строк.

Вот Релевент CSS:

div.example { 
background-color: #8C7D80; 
padding: 2px; 
margin: 2px; 
float: left; 
color: #96888B; 
text-align: center; 
position: relative; 
} 
+1

Вы могли бы предоставить [скрипку] (http://jsfiddle.net/) –

ответ

3

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

div.example { 
    // other stuff here 
    line-height: 1.5 
} 

Возможно ли установить фиксированную высоту линии?

1

Я бы предложил установить высоту явно и/или изменить свойство line-height.

div.example { 
    background-color: #8C7D80; 
    padding: 2px; 
    margin: 2px; 
    float: left; 
    line-height: 25px; 
    height: 25px; 
    color: #96888B; 
    text-align: center; 
    position: relative; 
}