Question

我正在创建个人资料页面，我想创建一个关注者列表（类似于推特）

最多18张图片，我认为24px x 24px每个图标。根据所附图像填充。

使用css再现这个的最佳方法是什么。这很容易使用来自db的PHP传播。

我正在寻找最干净的方法。建议请。 alt text

也许即使有一个预加载器也可以用来衡量，因为我们将处理1000个不同的图像。

干杯

这就是我想到的。

<ul class="icons">
  <li><img1></li>
  <li><img2></li>
  <li><img3></li>
  <li><img4></li>

然后在css

ul.icons li {display: inline;}

但是需要添加2行，所以想到两层<ul>...</ul> 问题是，我希望如果显示20，那么我们显示2行10，而不是18行和2行之一。

但那就像我想的那样干净可以做到，但是......我不知道是否有一种编程方式使用php来重复基于循环的<li> ... </li>标签

另外想调整图像预加载器，我已经看过这些，只是不确定它们被称为什么。使用js来处理加载。

Answer 1

这不是针对具体问题的Q＆amp; A网站吗？在我看来，听起来你希望我们为你做你的工作......

Answer 2

像这样？ example

或者为了简化它，您可以放弃ul和li元素，只需使用div中的图像： example

Answer 3

您需要的是以下内容，它将为您提供两行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元素上。

Answer 4

使用单个ul或ol元素，给每个li元素一个固定的，并且float：在一个相对定位的父元素内。总宽度将是父元素的函数，因此如果您进行数学运算并进行适当设置，您将获得两行。

创建个人资料页面，需要帮助（css）

4 个答案: