Php 创建个人资料页面，需要帮助（css）
我正在创建一个个人资料页面，我想创建一个类似于twitter的追随者列表 最多18张图片，我想每个图标都是24px x 24px。根据所附图像进行填充 使用css复制此内容的最佳方法是什么。这很容易从数据库中使用php进行传播 我正在寻找最干净的方法。请给我一些建议 也许甚至有一个预加载抛出了良好的措施，因为我们将处理1000的不同的图像 干杯 这就是我的想法Php 创建个人资料页面，需要帮助（css）,php,css,Php,Css,我正在创建一个个人资料页面，我想创建一个类似于twitter的追随者列表 最多18张图片，我想每个图标都是24px x 24px。根据所附图像进行填充 使用css复制此内容的最佳方法是什么。这很容易从数据库中使用php进行传播 我正在寻找最干净的方法。请给我一些建议 也许甚至有一个预加载抛出了良好的措施，因为我们将处理1000的不同的图像 干杯 这就是我的想法 <ul class="icons"> <li><img1></li> <l
<ul class="icons">
<li><img1></li>
<li><img2></li>
<li><img3></li>
<li><img4></li>
另外，我还想在图像预加载程序中进行调整，我看到了这些，只是不确定它们的名称。使用js处理加载。这不是一个针对特定问题的问答网站吗？在我看来，这听起来像是你想让我们为你做你的工作…使用单个ul或ol元素，给每个li元素一个固定的with和float：在相对定位的父元素中左移。总宽度将是父元素的函数，因此如果您进行数学运算并适当设置，您将得到两行。像这样吗？ 或者，为了进一步简化，您可以抛弃ul和li元素，只需在div中使用图像：
您需要的是如下内容，它将为您提供两行60px的盒子：
<html>
<head>
<style>
#container{
border:1px solid red;
position:absolute;
}
ul{
list-style:none;
width: 180px;
margin:0px;
padding:0px;
}
ul li{
float:left;
width: 52px;
margin:0px;
padding:3px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
</body>
</head>
如果您的图像都是相同的可预测尺寸，您可以跳过浮动，在li元素上使用display:inline。您有一些代码要与我们共享吗？没有。想看看是否有人能想出一些干净的代码。我对如何重复做这件事有想法，但不知道如何更干净、更不引人注目。如果你有想法分享，那么我们将很乐意帮助你找到每一个想法的利弊。比如li class=toprow和li class=bottomrow？不，您不需要向li元素添加类，您应该能够使用CSS来实现您的目标。是的，正是这样，因此我最初问。这很干净且不引人注目：很好，现在只需要看看我们是否可以使用php生成循环，并将两行的计数宽度设置为匹配。不确定css中为什么有背景图像？与html中的图像完全匹配，或者这只是为了演示占位符填充并将其设置为透明？我猜是这样的。我唯一关心的是填充，因为你的图像已经有了一个边框，看起来像是填充。你可以使用边距来分隔图像，即：`。图标img{margin right:5px；margin bottom:5px；}不需要背景图像，我的问题是，当我添加一个a href链接到图像以链接回配置文件时，我在图像中添加了一个1px的黑色边框，这会使图像跳跃。不确定我做错了什么：.iconsx{width:420px；border:1px纯白；padding left:5px；padding top:5px；}.iconsx img{display:inline block；width:32px；height:32px；background color:white；margin right:4px；margin bottom:4px；border:1px纯白fff；}.iconsx img a:link{border:1px solid$fff；}.iconsx img:hover，.iconsx img a:hover{border:1px solid 000；}请确保并定义：hover伪类的样式，如：hover{border:0px solid black；}并定义相同的链接样式。
<html>
<head>
<style>
#container{
border:1px solid red;
position:absolute;
}
ul{
list-style:none;
width: 180px;
margin:0px;
padding:0px;
}
ul li{
float:left;
width: 52px;
margin:0px;
padding:3px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
</body>
</head>