2011-12-05 53 views
0

我有一个要求,其中的前景是如图所示的附加的图像Project Outline Image替代使用CSS

我已经完成了通过利用在HTML表格和使用CSS样式的任务在下面的设计。

标准是一行中的图像几乎相同(即两个图像),并且每行的内容都会发生变化。所以每行的内容都不相同,但每行的图像保持不变。仅供参考,会有多个行数。除了使用表格之外,实施诸如设计的最佳实践是什么,其中它也应该灵活地改变内容。或者使用表格是最好的选择。从专业人士

建议表示赞赏

问候

+0

就像下面稍微留意-SpaceBeers解决方案是伟大的,但我在你做的是去除其他职位注意到,你没有;不想绝对positining - 乔丹(和我)以下两个答案不要使用绝对定位。如果你通过我的答案中的floattutorials链接工作(它实际上并不需要那么长时间),它会告诉你如何做到这一切,更重要的是,了解它! – JorgeLuisBorges

回答

2

我不希望它为你写的,但我做了一个快速模拟一个让您看看 - http://jsfiddle.net/spacebeers/TAJdw/

你不想使用表格比表格日期以外的任何了。你花更多时间研究CSS。

看看我的例子。这是内容容器的一个实例。你想从那里做什么是看他们连续两个。为.container类构建CSS,然后复制.contentContainer的另一个实例并查看获得的结果。

如果您愿意,我很乐意提供帮助,但总是有好的方法自己解决。你会在这里得到更好的答案,并避免不必要的问题downvoting。

+0

感谢您的所有评论和链接,你们大多数人已经写了一个例子,一个接一个地产生块。但我的问题是我需要垂直和水平重复内容和图像 – 125369

+0

我已经更新了我的示例。你只需要将.container div复制到一个新行中 - http://jsfiddle.net/spacebeers/TAJdw/1/ – SpaceBeers

+0

感谢SpaceBeers – 125369

0

我会考虑使用一个背景图片的样式,一个div以便与所有你需要做的就是把那个相同的图像的每一行然后你可以定位外部div来让它看起来是正确的,尽管表格不是构建仍然工作的网页的最有效方式。

2

通常建议使用纯CSS来处理像这样的事情,而不是表格。表格会导致页面渲染速度变慢,因为内容需要在渲染引擎正确绘制之前加载。

尝试像this

0

像梅茨说 - 你需要考虑重复的内容 - 和学习浮动。我真的劝通过这个网站的工作

http://css.maxdesign.com.au/floatutorial/

它会教你的div设计的所有的基本知识。

在此期间 - 这里大概是你的。我已经添加了背景颜色,并且填充了所有高度和宽度,因为它们没有指定,但它应该让您开始。

如果您看一下html,我已经注释了什么只是重复的早期内容。

http://jsfiddle.net/zandergrin/k8EsP/3/