Question

我剪下了各大洲的图像并将其保存为png文件。我的目标是用html，css，bootstrap和其他任何东西整齐地组织起来。

我剪切图像，以便为每个大陆创建不同的链接。

截至目前，我使用bootstrap.css将它们组合在一起，但无法找出html和css，以便让它们整齐地结合在一起。

<div class="row-fluid" >
    <div class="span12" style="float: none; margin: 0 auto; width: 600px; height: 150px; text-align:center">

            <img src="images/NorthAmerica.png" style= "width: 300px; float: left;" />


            <img src="images/Europe.png" style="width: 300px; " />


            <img src="images/Asia.png" style=" width: 300px; " />


            <img src="images/SouthAmerica.png" style=" width: 300px; float: left; " />


            <img src="images/Africa.png" style=" width: 300px; " />
        </div>
    </div>

我听说过使用z-index和position：absolute;但我不能让他们整齐地在一起。必须有一个工具来组织表格中的图像，这将生成代码或我希望的东西。（顺便说一下，我不想使用svg，因为这个地图只有5个链接）

感谢您的建议。

Answer 1

你也可以不切割图像。该技术称为图像映射。唯一的问题是你需要知道不同大陆的坐标，但是imo，它比你正在做的容易得多。

Here's some reference
A image mapping tool以简化图像映射过程。

整齐地组织各大洲的图像

1 个答案: