1

我剪下大陆的图像并将它们保存为 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 个链接）

谢谢你的建议。

4

1 回答 1

3

您也可以在不剪切图像的情况下做到这一点。该技术称为图像映射。唯一的问题是您需要知道不同大陆的坐标，但是 imo，这比您所做的要容易得多。

这里有一些参考
一个图像映射工具来简化图像映射的过程。

于 2013-07-27T08:13:20.170 回答