【发布时间】：2015-02-16 20:26:43
【问题描述】：
我是新手，不是 HTML 和 CSS 专家。
我决定做一个项目，将 PSD 制作成 HTML 和 CSS。 该文件是 900 x 600 的图像，其中包含许多层和元素。
我看了一些关于如何发生这种情况的教程，但从未找到包含如此复杂图像的教程。
为了完成这项任务，我一直使用括号并使用实时预览。当我快完成时，我决定在一些浏览器中运行 HTML 文件，结果都是一样的——太糟糕了。
我的问题是：
-
如何使用 Chrome 实时预览（括号）引导自己，一切都很好，现在仍然如此，但是当我在 IE、Chrome 和 Safari 中打开文件时，情况非常非常糟糕？
使用这种非常简单的 HTML 和 CSS 编写方法是不是我错了（或者非常愚蠢）。
我的 HTML 看起来像这样（每个 div 为他自己，每个 div 都是平等的）：
<div id="woman">
<img src="/images/woman.png" alt="woman">
</div>
<div id="bgr-small">
<img src="images/bgr-small.png" alt="Beach">
</div>
<div id="lights" >
<img src="images/lights.png" alt="Projectors">
</div>
而我的 CSS 是这样的（每个 div 都有 id 并通过 id 修改它们并通过如下所示的方法定位它们）：
#woman {
padding-left: 20px;
position: absolute;
bottom: 35px;
left: 45px;
float: left;
z-index: 3;
}
#bgr-small {
position: absolute;
top: 147px;
bottom: 29px;
left: 115px;
right: 106px;
z-index: 2;
}
#lights {
position: absolute;
bottom: 723px;
left: 183px;
right: 170px;
}
现在一切都在正确的位置，但仅在括号实时预览中。在整个 CSS 中，我只使用 position: absolute; 。另外我认为故障在这个 position: absolute;
我该如何解决这个问题？我哪里错了？我做错了什么？
这是来自 PSD 的 sn-p：
【问题讨论】：
-
这个真的没法回答。一个人应该如何编写 HTML 等同于偏好和上下文。我会说，一般来说，绝对定位一切通常不是一个好的解决方案，因为它在不同的浏览器和设备方面相当不灵活。如今，大多数人不喜欢直接将 PSD 转换为 HTML，而只是将 PSD 文件用作“粗略指南”和 HTML 中的最终设计。
-
提供psd截图。那么我实际上会知道你想要完成什么。您将图像放在 div 标签内？为什么？您可以定位这些元素，而无需将它们包装在 div 中。但同样，我不知道最终结果，所以我无法回答。如果您正在尝试学习无表格网页设计，请查看我的个人作品集并查看网站。
-
我从 PSD 添加了 sn-p。