Replace layout (refer to screenshot) created using HTML table with CSS with jQTouch_问答_开发者

Replace layout (refer to screenshot) created using HTML table with CSS with jQTouch

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

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.

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 ve开发者_StackOverflow中文版rtically 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.

Replace layout (refer to screenshot) created using HTML table with CSS with jQTouch

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>

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>

Replace layout (refer to screenshot) created using HTML table with CSS with jQTouch

[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".