Question

我尝试将所有图像对齐，但是因为它是位置：绝对的;最后的结果是整个页面浮动。（这是我今天在SO上提出的另一个问题）所以我在考虑其他方式，我有一个动态加载图像的网页：

<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/images/char_elements/base_dark.png">
<img src="http://chaterix.com/public/images/char_elements/eyes/blue.png">
<img src="http://chaterix.com/public/images/char_elements/hair/blond.png">
<img src="http://chaterix.com/public/images/char_elements/mouth/happy.png">
<img src="http://chaterix.com/public/images/char_elements/pants/patrick.png"><img src="http://chaterix.com/public/images/char_elements/shoes/bleu2.png">
<img src="http://chaterix.com/public/images/char_elements/torso/google.png"></div>

我想知道 - 是否可以使用JavaScript（如PHP GD）将所有7个图像合并为一个图像并使用javascript在页面上输出？

所以说而不是打印出上面的代码，它会做这样的事情：

<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/tempGenerated/character.png">
</div>

这可能吗？我只是厌倦了位置绝对和浮动的东西，所以如果JS可以组合7个图像并使其成为1来解决问题。

Answer 1

这应该非常简单，CSS和位置绝对。我知道你说你正在寻找一种不同的方式，但这应该是可行的。您是否为图像设置了顶部，底部，右侧和左侧位置？不要忘记您需要在数字后添加px。另外，不要忘记在父元素上设置position属性，否则绝对位置会变得不稳定。

Answer 2

如果您正确使用position: absolute，则不应该“浮动页面”。给父母position: relative，他们将相对于这个div。给它一个top和一个left值，如果你全部给它4，当你调整页面/ div的大小时它会偏斜

将7个图像合并为一个，一个在另一个上面并输出为单个图像？

2 个答案: