Как удалить пустое пространство в сетке миниатюр

Я пытаюсь создать сетку с Div elemtents и это выглядит на данный момент:Как удалить пустое пространство в сетке миниатюр

enter image description here

«2» является больше на цели, но когда я сделайте его больше, там пустое место с левой стороны, а другие меньшие блоки туда не идут. Мой вопрос: как мне получить «5», чтобы перейти в это пустое пространство и от 6 до 5, от 7 до 6 и т. Д. Как мне избавиться от этого пустого пространства?

Некоторый код:

CSS:

.block 
    position: relative 
    float: left 
    display: inline

HTML:

<div class='grid'> 
     <div class='block block-1'><span>1</span></div> 
     <div class='block block-2'><span>2</span></div> 
     <div class='block block-1'><span>3</span></div> 
     <div class='block block-1'><span>4</span></div> 
     .... 
</div>

бы мне нужно Javascript, чтобы сделать это или есть HTML/CSS решение?

источник

2015-02-05 Colin

Возможно, столбец может помочь вам [ссылка] (https://www.google.es/url?sa=t&source=web&rct=j&ei=97HTVMqsJIzYavyUgOAC&url=http://css-tricks.com/almanac/properties/ c/column-count/& ved = 0CCIQFjAC & usg = AFQjCNHp65ilNG4LwWEK3yK4WWOU6WB5qQ & sig2 = oiht-g5u_SaHvPggNjYdaQ) – fcastillo

@fcastillo Я пробовал, но это не имеет никакого значения. Я думаю, потому что мои блоки уже имеют ширину%. – Colin

Вы могли бы хотеть смотреть на этот пост [http://stackoverflow.com/questions/11136286/css-float-empty-spaces][1] [1]: HTTP: // StackOverflow. com/вопросы/11136286/css-float-empty-spaces – imnancysun

Вы не можете сделать это, используя чистый CSS и html. Jquery Mansory решает это сложными математическими оценками всех элементов.

источник

2015-02-05 19:50:24

Как удалить пустое пространство в сетке миниатюр

ответ

Смежные вопросы