最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery Masonry—Constrain to a Maximum Width on Window Resize Event? - Stack Overflow

programmeradmin5浏览0评论

I am using jQuery Masonry to display a grid of boxes (all the same size).

Here is my testing site.

Works great when the browser width is 1100px or below.

When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.

I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.

On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.

How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."

Thanks

UPDATE Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.

I am using jQuery Masonry to display a grid of boxes (all the same size).

Here is my testing site.

Works great when the browser width is 1100px or below.

When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.

I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.

On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.

How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."

Thanks

UPDATE Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.

Share Improve this question edited May 13, 2012 at 19:30 davecave asked May 11, 2012 at 3:49 davecavedavecave 4,8186 gold badges29 silver badges34 bronze badges 6
  • 1 have you tried using the containerStyle option to masonry? – x1a4 Commented May 12, 2012 at 4:32
  • I included the containerStyle option, but it doesn't seem to read it for some reason. Right now that should put position: absolute on the project wrapper, but it's not. – davecave Commented May 12, 2012 at 5:54
  • Here is the fiddle. Not the best fiddle ever, but it works. If you can get it to not expand beyond 3 columns, you get a cookie. Don't worry about the weird hover states. jsfiddle/26dsg/4/embedded/result – davecave Commented May 12, 2012 at 6:11
  • that !important seems to break your layout. Try without it. – user201788 Commented May 17, 2012 at 4:40
  • It seems the resize issue it still happening after deleting !important – davecave Commented May 17, 2012 at 20:13
 |  Show 1 more ment

1 Answer 1

Reset to default 7

Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?

#wrapper { max-width: 990px; }
发布评论

评论列表(0)

  1. 暂无评论