html - 使用 CSS 图像定位和屏幕分辨率，我怎样才能最好地定位这张图片？

Question

我有一个鼠标悬停效果，当客户悬停一面旗帜时，它上面的图片带有他们国家的小图标和一条消息，“以英语查看此网站”，或“Regardez la website en francais”或其他任何内容.

我已经尝试使用像素和百分比来设置我的 css 位置，但如果您使用的是 1280 或 1900 屏幕分辨率，图片可能会出现偏差。这是我想要的样子:

                                                 picture should be here
                                   flag 1 flag2 flag3 flag4 flag5 flag6

因此，当他们将鼠标悬停在上方时，图片显示。 Treemonkey帮助我今天早些时候到达那里，现在我只需要放下 CSS。目前，我的 CSS 是这样的:

  .map{
  display:none;
  }
  a.flagbutton:hover .map{
  display:block;
  position:fixed;
  top:14%;
  right:20%;
  } 

如果有人可以就如何使用不同的屏幕分辨率解决此问题提出任何建议 - 如果可能的话 - 我将不胜感激!

Answer 1

您可以为所有字段使用一个容器，为标志链接使用另一个容器

<div class="top_container">

    <div class='map_cont'>map</div>

    <div class='flags_cont'>
        <a href="#" class='flagbutton'>flag 1</a>
        <a href="#" class='flagbutton'>flag 2</a>
        <a href="#" class='flagbutton'>flag 3</a>
        <a href="#" class='flagbutton'>flag 4</a>
    </div>
</div>

将顶部容器的外边距设置为自动，以便它在每一侧保持一定距离，然后将“map_cont”和“flags_cont”容器都 float 到右侧，以便它们出现在屏幕的右侧。

.top_container { width:90%; margin:auto; }
.map_cont{ float:right; }
.flags_cont { clear:both; float:right }
a.flagbutton { margin-left:5px; }