重新布局（见截图）使用HTML表CSS与jQTouch创建 [英] Replace layout (refer to screenshot) created using HTML table with CSS with jQTouch
问题描述
我想实现的东西，就像下面使用CSS截图。 目前，它是使用HTML表格实现，因为据我所知，HTML表通常不推荐。
我想实现的是：
- 在右侧的日期必须在垂直对齐，中间左侧的图像，就像截图
- 有每张照片之间的差距（这现在我只能想
＆LT; BR /＆GT;） - 在每幅图像和日期都应该是不同的了。
HTML如下：
包装和滚轮是iScroll CSS类。
＆LT; DIV ID =包装＆GT;
＆LT; DIV ID =卷轴＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
变种I = 0;
对于（i = 0; I＆LT; = 20;我++）
{
文件撰写（'＆LT;表＆gt;'）;
文件撰写（'＆LT; TR＆GT;'）;
的document.write（'＆其中; TD＆GT;＆所述; IMG SRC =gimages / photo1.JPG宽度=50％＆GT;＆所述; / TD＆GT;'）;
文件撰写（'＆LT; TD＆GT; 11 2011＆LT月; / TD＆GT;'）;
文件撰写（'＆LT; / TR＆GT;'）;
文件撰写（'＆LT; /表＆gt;'）;
}
＆LT; / SCRIPT＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
使用列表＆LT; UL＆GT; 和＆LT;李＆GT; ，不使用目录样式的图像，使用背景图片来代替：
＆LT; HTML＆GT;
＆LT;头＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; UL类=myul＆GT;
＆LT;李ID =第一＆GT; 2011＆LT 12月11日; /李＆GT;
＆LT;李ID =第二＆GT; 2011＆LT 12月11日; /李＆GT;
＆LT;李ID =第三＆GT; 2011年12月11 LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
＆LT;风格类型=文本/ CSS＆GT;
.myul {
列表样式类型：无;
填充：0px;
保证金：0px;
}
.myul李{
的line-height：35px;
填充左：50像素;
背景重复：不重复;
背景位置：0;
}
.myul李＃第一{
背景图像：网址（temp.png）;
}
.myul李＃第三{
背景图像：网址（temp.png）;
}
＆LT; /风格＆GT;
不像类，ID必须是唯一的。您既可以class和id属性分配给标签。以上是一个例子，得到的图像，以在第一和第三清单，但不是第二个。在类中定义的所有第一，第二和第三含有式.myul礼。
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.
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>
[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".
这篇关于重新布局（见截图）使用HTML表CSS与jQTouch创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
