如何以马赛克样式对齐图像? html / css [英] How to align images in a mosaic style? html/css
问题描述
我想包含一组马赛克样式的图像,这些图像全部通过HTML5 / CSS分组在一起。我还使用Bootstrap和各种行,列和div来组织和定位内容-但是我无法将图像分组在一起。我已经能够将它们调整到一定程度,即使它们仍然不匹配,等等。请参阅附件中的图像以了解我要达到的目标。
I would like to include a mosaic style set of images that all group together via HTML5/CSS. I am also using Bootstrap and various rows, columns and div's to structure and position the content - however i am unable to group my images together. I have been able to align them to am extent they are still mismatched etc. Please see the attached image for what i am trying to achieve.
有什么想法吗?
推荐答案
使用masonary.js
Use masonary.js
或者您可以编写自己的js函数。在这里可以找到非常好的资源(引起这种疯狂的家伙的回答,这是pinterest的前端开发人员):
http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest- coms-absolute-div-stacking-layout
Or you could code your own js function. A really good resource can be found here (an answer by the fellow who started this madness, a front-end dev for pinterest): http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout
当前,您可以使用css3列使用css进行此操作。看看这里的示例(尽管这不能完全解决您的布局问题):
Currently, you can do this with css, using css3 column. Take a look at the example here (although this does not solve for your layout exactly):
http://jsfiddle.net/jalbertbowdenii/7Chkz/
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
这篇关于如何以马赛克样式对齐图像? html / css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!