如何排列图像 3x3？

Question

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

Answer 1

3x3 图像网格

这个 css 允许你：

1. 垂直居中图像
2. 水平居中图像
3. 允许各种尺寸的图片
4. 小于网格大小的图像保持原始大小，不会有模糊的图像
5. 较大的图像会调整为所需的值
6. 可以通过设置max-width & max-height 在css的第三部分简单地改变
7. 而且显然它保持纵横比

这是使用float-left 和line-height 技巧实现的；

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点击处理程序

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

Answer 2

使用 ul li

<ul>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
</ul

DEMO

Answer 3

你的 HTML -

<div>
 <div class="row1">
     <img src="" />
 </div>
 <div class="row1">
     <img src="" />
 </div>
 <div class="row1">
     <img src="" />
 </div>
</div>

<div>
 <div class="row2">
     <img src="" />
 </div>
 <div class="row2">
     <img src="" />
 </div>
 <div class="row2">
     <img src="" />
 </div>
</div>

<div>
 <div class="row3">
     <img src="" />
 </div>
 <div class="row3">
     <img src="" />
 </div>
 <div class="row3">
     <img src="" />
 </div>
</div>

你的 CSS -

.row1,row2,row3
{
   display: inline-block;
}

Answer 4

您可以使用精灵表。这将安排在一个规则的网格中。 Sass 很容易做到这一点，或者你可以使用 css。

try online

css sprite generator

Answer 5

<div class="row3">
    <img src="#"  />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
</div>

css

   <style>
            .row3 img  {
                width:33%;
                height:33%;
                float:left;
                display:inline-block;
                border:solid 1px red;
            }
        </style>

Answer 6

如果你想把你所有的网站都安排得干净利落，你可以看看bootstrap。

否则，其他解决方案更好。

这是一个受引导逻辑启发的codepen。

代码如下：

HTML：

<div class="container">
  <div class="row3">
     <img class="col1" src="http://placekitten.com/400/300"/>
     <img class="col1" src="http://placekitten.com/300/400"/>
     <img class="col1" src="http://placekitten.com/350/400"/>
  </div>
  <div class="row3">
     <img class="col1" src="http://placekitten.com/250/400"/>
     <img class="col1" src="http://placekitten.com/400/250"/>
     <img class="col1" src="http://placekitten.com/440/400"/>
  </div>
  <div class="row3">
     <img class="col1" src="http://placekitten.com/200/230"/>
     <img class="col1" src="http://placekitten.com/430/400"/>
     <img class="col1" src="http://placekitten.com/400/430"/>
  </div>
</div>

CSS：

.container{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

.row3{
  width:20%; /*the size you want*/
  margin-left:auto;
  margin-right:auto;
  margin-top:5px; /*Adjust it how you want*/
  margin-bottom:5px; /*Adjust it how you want*/
}

.col1{
  width:32%;
  vertical-align: middle;
  margin:auto;
}

结果与可爱的小猫：3：