如何排列3x3图像？ [英] How to arrange images 3x3?

问题描述

我有9张图像，如果必须将它们排列为3x3，则意味着3行3列。最好的方法是什么？我应该使用CSS吗？

I have nine images and if I have to arrange them 3x3,which means 3 rows and 3 columns. What would be the best way of doing it? Should I be using CSS?

推荐答案

3x3图像网格

此CSS可让您：

1. 将图像垂直居中


2. 将图像水平居中


3. 允许各种尺寸的图像


4. 小于网格尺寸的图像保持原始尺寸，以免图像模糊


5. 较大的图像将调整为期望的值


6. ，只需在CSS的第3部分中通过设置最大宽度即可更改& 最大高度


7. 显然，它保持了长宽比

1. centers images vertically
2. centers images horizontally
3. allows images of various sizes
4. smaller than the grid size images keep original size, to not have the blurred images
5. bigger images get resized to the desidered value
6. that can simply be changed in the 3th part of the css with setting the max-width & max-height
7. and obiovsly it keeps the aspect ratio

这是通过 float-left & line-height 技巧；

This is achieved using float-left & the line-height trick;

HTML

<div class="grid3x3">
 <div><img src="http://placekitten.com/200/300"></div>
 <div><img src="http://placekitten.com/240/300"></div>
 <div><img src="http://placekitten.com/400/300"></div>
 <div><img src="http://placekitten.com/280/300"></div>
 <div><img src="http://placekitten.com/210/140"></div>
 <div><img src="http://placekitten.com/240/200"></div>
 <div><img src="http://placekitten.com/100/300"></div>
 <div><img src="http://placekitten.com/200/100"></div>
 <div><img src="http://placekitten.com/700/300"></div>
</div>

CSS

.grid3x3{
 width:300px;
 height:300px;
 clear:both;
}
.grid3x3>div{
 width:100px;
 height:100px;
 float:left;
 line-height:100px;
 text-align:center;    
}
.grid3x3>div>img{
 display:inline-block;
 vertical-align:middle;
 max-width:80%;
 max-height:80%;
}

演示

http://jsfiddle.net/c4gb8/

其他样式。

http://jsfiddle.net/c4gb8/1/

和javascript点击处理程序

and javascript click handler

http://jsfiddle.net/c4gb8/2/

这篇关于如何排列3x3图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！