在多列网格中,如何限制每列中的项目数
问题描述:
I am working on a seamless responsive grid using the css property column-count and I want to display 5 columns with a limit for each column to have equal number of items (for example limit to 4 items per column), but cannot find such property in css.
我正在使用css属性column-count处理无缝响应网格,我希望显示5列 每列的限制具有相同数量的项目(例如,每列限制为4个项目),但在css中找不到这样的属性。 p>
p>
div>
答
This can be achieved by using Jquery Masonry
What is Masonry?
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
How to use:
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});