Question

我正在开发一个项目，需要一个包含成员头像的网格（类似于Twitter粉丝网格）See sample here

所以目前我正在做这样的事情......

<div id="panel">  
<h1> Current Members </h1> 
<a href="#"><img src="silhouette.jpg"alt="" title=""/></a> 
<a href="#"><img src="silhouette.jpg"alt="" title=""/></a> 
<br style="clear:both;"/> 
</div>

并且CSS看起来像这样......

#panel {
width:290px;
background-color:#AAA;
padding: 15px;

}

#panel a img {
position: relative;
display:block;
width: 70px;
height: 70px;
float: left;
margin: 0px;
padding: 0px;
z-index: 1;
border:#888 1px solid;

}

所以我只是给化身70px的大小并将它们漂浮在固定宽度的div中。问题是我想将图像大小声明为一个百分比，以使它们流畅并对其包含元素做出响应。我猜这意味着创建一个包含4列的网格，其中每列占其容器宽度的25％。那么化身将被赋予最大宽度：每列内100％？

我怎样才能在CSS中实现这个目标？

Answer 1

您可以使用以下内容：

#panel a{
position: relative;
display:block;
width: 24%;
float: left;
z-index: 1;
padding:0.5%;
}

#panel a img{
 width:100%
}

#panel{
  width:350px;   
}

演示here

响应/灵活的图像网格

1 个答案: