Заменить макет (см. Скриншот), созданный с использованием таблицы HTML, на CSS с помощью jQTouch - PullRequest
Новая
       18

Заменить макет (см. Скриншот), созданный с использованием таблицы HTML, на CSS с помощью jQTouch

0 голосов
/ 07 октября 2011

Я пытаюсь достичь чего-то похожего на скриншот ниже, используя CSS. В настоящее время он реализован с использованием таблиц HTML, и, насколько мне известно, таблица HTML обычно не рекомендуется.

Чего я хочу добиться:

  • дата справа должна быть выровнена по вертикали, посередине к изображению слева, как на скриншоте
  • между каждой фотографией есть пробел (о котором сейчас я могу думать только о <br/>)
  • все изображения и даты должны быть разными.

Screenshot of what I want to achieve

HTML ниже:

Оболочка и скроллер - это классы CSS iScroll. 

<div id="wrapper">
                <div id="scroller">


                    <script type="text/javascript">
                        var i=0;
                        for (i=0;i<=20;i++)
                        {   
                            document.write('<table>');
                            document.write('<tr>');
                            document.write('<td><img src="gimages/photo1.JPG" width="50%"></td>');
                            document.write('<td>11 December 2011</td>');
                            document.write('</tr>');
                            document.write('</table>');
                        }                           
                    </script>
                </div>
            </div>

1 Ответ

0 голосов
/ 07 октября 2011

Использовать список <ul> и <li>, не использовать изображение в стиле списка, вместо этого использовать фоновое изображение: 

<html>
    <header>
    </header>
    <body>
        <ul class="myul">
            <li id="first">11 December 2011</li>
            <li id="second">11 December 2011</li>
            <li id="third">11 December 2011</li>
        </ul>
    </body>
</html>

<style type="text/css">
.myul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.myul li {
    line-height: 35px;
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: 0;
}
.myul li#first {
    background-image: url(temp.png);
}
.myul li#third {
    background-image: url(temp.png);
}
</style>

enter image description here

[ПРАВИТЬ]

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

...