Question

我有9个图像，如果我必须将它们排列为3x3，这意味着3行3列。这样做的最佳方式是什么？我应该使用CSS吗？

Answer 1

3x3图片网格

这个css允许你：

垂直居中图片
水平居中图片
允许各种尺寸的图像
小于网格尺寸的图像保持原始尺寸，没有模糊图像
将更大的图片调整为所需的值
可以简单地在css的第3部分进行更改，并设置max-width＆amp; max-height
并且它保持纵横比

使用float-left＆amp; 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

<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 5

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

try online

css sprite generator

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：

Result with lovely kittens :3

如何安排图像3x3？

6 个答案: