creating a profile page, need help ( css )_问答_开发者

creating a profile page, need help ( css )

开发者 https://www.devze.com 2023-01-27 02:11 出处：网络

I am creating a profile page, and I would like to create a followers list ( similar to twitter ) Max 18 images across , I think 24px x 24px each icon. With padding as per the image attached.

相关专题：css php

I am creating a profile page, and I would like to create a followers list ( similar to twitter )

Max 18 images across , I think 24px x 24px each icon. With padding as per the image attached.

What would be the best method for reproducing this using css. That is easily propagated using php from a db.

I am looking for cleanest method. Suggestions please.

creating a profile page, need help ( css )

Perhaps even with a preloader thrown in for good measure, as we will be dealing with 1000's of different images.

Cheers

Well t开发者_如何学Gohis is what I had thought of.

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

then in the css

ul.icons li {display: inline;}

But would need to add 2 rows, so was thinking two layers of <ul>...</ul> The issue, is I would like that if 20 are displayed then we show 2 rows of 10, rather than one row of 18 and one of 2.

But thats as clean as I think It could be done, but... I didnt know if there was a programatic way of using php to repeat the <li> ... </li> tags based on a loop

Plus wanted to tweak in image preloader, and I have seen these, just not sure what they are called. Uses js to handle the loading.

like this? example

or to simplify it even more, you could ditch the ul and li elements and simply use images inside a div: example

Isn't this is a website for Q&A on specific problems? In my opinion it sounds like you want us to do your work for you...

What you need is something like the following, which will give you two rows of 60px boxes:

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

If your images are all of the same predictable dimensions, you could skip the floating and use display:inline on the li elements.

Use a single ul or ol element, give each li element a fixed with and float:left within a relatively positioned parent. The total width will be a function of the parent element, so if you do the math and set that appropriately you'll get your two rows.