使用CSS替代以下设计

Question

我有一个要求，其中的前景如附图

所示

我通过在HTML中使用表格和使用CSS设置样式来完成任务。

标准是连续的图像几乎相同（即两个图像），并且每行的内容都会发生变化。因此每行的内容不同，但每行的图像保持不变。仅供参考，将有多个行。除了使用表之外，实现诸如设计之类的最佳实践是什么，其中还应该灵活地更改内容。或者使用表格是最好的选择。

赞赏专业人士的建议。

Answer 1

我不想为你写它，但我已经快速嘲笑你了 - http://jsfiddle.net/spacebeers/TAJdw/

您不希望将表格用于表格日期以外的任何其他内容。你花时间研究CSS会好得多。

看看我的例子。这是内容容器的一个实例可能是什么样子。你想从那里做的是看看连续两个。为.container类构建CSS，然后复制.contentContainer的另一个实例，看看你得到了什么结果。

如果你愿意的话我很乐意提供帮助，但是自己总是好好解决问题。你会在这里得到更好的答案，避免不必要的低估你的问题。

Answer 2

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

尝试this

之类的内容

Answer 3

我会考虑使用带有背景图像样式的div，这样对于每个具有相同图像的行，您需要做的就是将特定的div类放入。然后您可以定位外部div来获取它要正确看，虽然表格不是构建网页的最有效方式，但它们仍然有效。

Answer 4

就像梅兹所说 - 你需要考虑重复内容 - 并学习花车。我真的建议通过这个网站工作

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

它将教你使用div设计的所有基础知识。

与此同时 - 这大致是你的追求。我添加了背景颜色并组成了所有的高度和宽度，因为它们不是特定的，但它应该让你开始。

如果你看一下html，我已经注释了之前内容的重复内容。

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