admin 管理员组文章数量: 1086019
I'd like to justify images across a fixed width (exactly how google images does it, eg: here)
Is there a somewhat simple solution for this?
The last resort would be to write a jquery script that calculates how many images it can fit into a row and iterates individually through the images. Seems sort of overkill for something that can be acplished with text using text-align:justify...
I'd like to justify images across a fixed width (exactly how google images does it, eg: here)
Is there a somewhat simple solution for this?
The last resort would be to write a jquery script that calculates how many images it can fit into a row and iterates individually through the images. Seems sort of overkill for something that can be acplished with text using text-align:justify...
Share Improve this question asked Mar 14, 2012 at 10:33 miketuckermiketucker 1,0741 gold badge15 silver badges28 bronze badges 1- 1 Lets see how far have you reached :) – Starx Commented Mar 14, 2012 at 10:35
4 Answers
Reset to default 4Use display: inline-block; for elements with images and text-align: justify; for parent element. Example:
<ul class="images">
<li><img src="..."/></li>
...
</ul>
and CSS:
.images{text-align: justify;}
.images li{display: inline-block;}
If you look for a powerful tool to justify images across a fixed width, this jQuery plugin may help you: https://github./brunjo/rowGrid.js
Demo
Make sure you have an outer container defined say a div or section with fixed width and try to float the image container within it to achieve it
<div id="outer-container" style="width:800px;height:400px;">
<div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
<img src="your_image_src" width="100" height="100"/>
</div>
<div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
<img src="your_image_src" width="100" height="100"/>
</div>
<div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
<img src="your_image_src" width="100" height="100"/>
</div>
</div>
You may use display:inline-block instead of float:left to achieve it.but display:inline-block can be used based on your situation.
On the long run it'll have many issues that is initially unthought of. Check out my plugin Justified Image Grid (do a google search). I did my best to replicate how flickr shows it with dynamic row height and minimal cropping.
本文标签: javascriptJustify alignment of images in rows (ala Google Images)Stack Overflow
版权声明:本文标题:javascript - Justify alignment of images in rows (ala Google Images) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/p/1744012740a2518453.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论