使用 jQTouch 替换使用 HTML 表和 CSS 创建的布局（参见屏幕截图）

发布于 2024-12-09 03:16:22 字数 1222 浏览 1 评论 0原文

我正在尝试使用 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>

原文

I'm trying to achieve something just like screenshot below using CSS.
Currently, it is implemented using HTML tables and as far as I know HTML table is usually not recommended.

What I want to achieve is:

the date on right must be a vertically aligned, middle to the image on the left, just like the screenshot
there is a gap between each photo (which right now I can only think of <br/>)
every image and dates are supposed to be different too.

Screenshot of what I want to achieve

HTML below:

wrapper and scroller are iScroll CSS classes.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城缀染半城烟沙 2024-12-16 03:16:22

使用列表

，不要使用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>

在此处输入图像描述

[编辑]

与类不同，id 必须是唯一的。您可以将 class 和 id 属性分配给标签。上面的示例为第一个和第三个列表提供图像，但不为第二个列表提供图像。所有第一、第二和第三个都包含类“.myul li”中定义的样式。

Use list <ul> and <li>, don't use list-style-image, use background image instead:

<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

[EDIT]

Unlike class, id must be unique. You can assign both class and id attribute to a tag. Above is an example to give an image to the first and third list, but not the second. All first, second and third contains style defined in the class ".myul li".

回复收藏 0 原文

~没有更多了~