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

#html #css #alignment #jqtouch

#HTML #css #выравнивание #jqtouch

Вопрос:

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

Чего я хочу добиться, так это:

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

Скриншот того, чего я хочу достичь

HTML ниже:

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

 <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. у вас есть демонстрационный сайт или скрипка ? или хотя бы часть вашего кода?

2. привет @Joseph, вставил html-коды.

3. вы выборочно заполняете данные из базы данных? или какой язык на стороне сервера вы используете? php? ruby?

4. @KMC. Я намереваюсь получить данные в виде JSON с помощью jQuery. Приведенные выше коды являются лишь образцом. Я совершенно уверен, как писать алгоритмы JS, просто мне сложно правильно представить презентацию.

Ответ №1:

Используйте list <ul> и <li> , не используйте list-style-image, вместо этого используйте фоновое изображение:

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

введите описание изображения здесь

[ПРАВИТЬ]

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

1. привет @KMC, можно ли будет загружать каждое изображение из другого файла изображения?

2. да! все изображения будут другими.

3. Привет, я совершенно не знаком с CSS. Как мне отделить фоновое изображение от идентификатора?

4. У меня еще один вопрос! Черт возьми. Я понял, что другой css, который у меня есть, перезаписывает CSS, который вы мне дали. Как я должен заставить HTML использовать CSS, который я использовал?

5. один трюк вы можете использовать, чтобы положить <style> content outside and AFTER the </html> tag instead. См. Отредактированный ответ.