создание страницы профиля, нужна помощь (css) - PullRequest
Новая
       0

создание страницы профиля, нужна помощь (css)

0 голосов
/ 28 ноября 2010

Я создаю страницу профиля, и я хотел бы создать список подписчиков (аналогично твиттеру)

Макс. 18 изображений в поперечнике, я думаю, 24xx 24px каждого значка.С отступом согласно приложенному изображению.

Каков наилучший метод для воспроизведения этого с использованием CSS.Это легко распространяется с помощью php из базы данных.

Я ищу чистый метод.Предложения, пожалуйста. alt text

Возможно, даже с предзагрузчиком, добавленным для хорошей меры, так как мы будем иметь дело с тысячами различных изображений.

Приветствия

Ну, этоо чем я думал. 

<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 для обработки загрузки.

Ответы [ 4 ]

2 голосов
/ 28 ноября 2010

как это? пример

или, чтобы еще больше упростить его, вы можете отбросить элементы ul и li и просто использовать изображения внутри div: пример

2 голосов
/ 28 ноября 2010

Разве это не сайт для вопросов и ответов по конкретным проблемам? На мой взгляд, звучит так, будто вы хотите, чтобы мы сделали вашу работу за вас ...

1 голос
/ 29 ноября 2010

То, что вам нужно, это что-то вроде следующего, который даст вам две строки по 60 пикселей: 

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

Если ваши изображения имеют одинаковые предсказуемые размеры, вы можете пропустить плавающее и использовать display: inline для элементов li.

0 голосов
/ 28 ноября 2010

Используйте один элемент ul или ol, присвойте каждому элементу li фиксированное значение с помощью float: left в относительно позиционированном родительском элементе.Общая ширина будет функцией родительского элемента, поэтому, если вы выполните математику и установите ее соответствующим образом, вы получите две строки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...