Question

我尝试在圆形图像周围制作一个反复使用的菜单。我的问题出现在屏幕分辨率改变时，按钮不会停留在圆形图片旁边，它会改变位置。如何将此img按钮与该圆形图像对齐，以便它们不会在所有屏幕上运行。谢谢！

<div id="container">  
<div id="button1"><a href=""><img src="http://menu.bridge-network.ro/images/button1.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button1b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button1.png'" /></a></div>
<div id="button2"><a href=""><img src="http://menu.bridge-network.ro/images/button2.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button2b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button2.png'" /></a></div>   
<div id="button3"><a href=""><img src="http://menu.bridge-network.ro/images/button3.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button3b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button3.png'" /></a></div>
<div id="circle"><img src="http://menu.bridge-network.ro/images/circle.png"></div>
<div id="button4"><a href=""><img src="http://menu.bridge-network.ro/images/button4.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button4b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button4.png'" /></a></div>
<div id="button5"><a href=""><img src="http://menu.bridge-network.ro/images/button5.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button5b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button5.png'" /></a></div>

CSS：

body {
    background-color: black;
}
#container{
  clear: both;
  padding-top: 20px;
  text-align:center;
  position: relative;
  text-align:center;
}
#circle {
position:relative;
width:600px;
margin:auto;
z-index:1;
}
#button1 {
position:relative;
margin:auto;
z-index:2;
}
#button2 {
position:relative;
z-index:3;
float: left;
top:120px;
left:420px;
}
#button3 {
position:relative;
z-index:4;
float: right;
top:120px;
right:420px;
}
#button4 {
position:relative;
z-index:5;
float: left;
left:520px;
bottom:40px;
}
#button5 {
position:relative;
z-index:6;
float: right;
right:520px;
bottom:40px;
}

http://jsfiddle.net/dqba73u8/4/

Answer 1

我最近遇到过这样的事情！媒体查询也可以完成这项工作，但我认为以百分比动态播放更容易！

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>

<style>
    body {
        background-color: black;
    }
    #container{
        padding-top: 20px;
        text-align:center;
        position: relative;
        top:50px;
    }
    #circle {
        max-width:600px;
        margin:0 auto;
        width:90%;
        position:relative;
        display: block;
        text-align: center;
    }
    #your_center {
        width:50%;
        max-width:400px;
        margin:0 auto;
        text-align: center;
        position: relative;
    }
    #your_left_top, #your_left_bottom, #your_right_top, #your_right_bottom {
        max-width:200px;
        text-align: center;
        width:60%;
        position: absolute;
    }
    #your_left_top  {
        right:98%;
        bottom:55%;
    }

    #your_left_bottom  {
        right:75%;
        bottom:0;
    }
    #your_right_top  {
        left:96%;
        bottom:55%;
    }

    #your_right_bottom  {
        left:74%;
        bottom:0;
    }

    #button1 {
        max-width:200px;
        text-align: center;
        width:50%;
        position: relative;
        left:25%;
        top:-17%;
    }

     #button2, #button3, #button4, #button5, #button6, #button7 {
        max-width:200px;
        width:100%;
    }
    #circle img, #button1 img,#button2 img, #button3 img, #button4 img, #button5 img, #button6 img {
        position: relative;
        width:100%;
    }


</style>
<body>
    <div id="container" class="cf">

        <div id="your_center">
            <div id="your_left_top">
                <div id="button2"><a href=""><img src="http://menu.bridge-network.ro/images/button2.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button2b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button2.png'" /></a></div>
            </div>
            <div id="your_left_bottom">
            <div id="button4"><a href=""><img src="http://menu.bridge-network.ro/images/button4.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button4b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button4.png'" /></a></div>
            </div>
                <div id="button1"><a href=""><img src="http://menu.bridge-network.ro/images/button1.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button1b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button1.png'" /></a></div>
            <div id="circle"><img src="http://menu.bridge-network.ro/images/circle.png" /></div>
            <div id="your_right_top">
                <div id="button3"><a href=""><img src="http://menu.bridge-network.ro/images/button3.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button3b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button3.png'" /></a></div>
            </div>
            <div id="your_right_bottom">
                <div id="button5"><a href=""><img src="http://menu.bridge-network.ro/images/button5.png" onmouseover="this.src='http://menu.bridge-network.ro/images/button5b.png'" onmouseout="this.src='http://menu.bridge-network.ro/images/button5.png'" /></a></div>
            </div>
        </div>
    </div>
   </body>
</html>

＆＃13;

Answer 2

您可以从以下网址开始使用媒体查询：

@media only screen and (max-width: 1600px) {
  #button2{
    left: 24%;
  }
  #button3{
    right: 24%;
  }
  #button4{
    left: 29%;
  }
  #button5{
    right: 29%;
  }
}
@media only screen and (max-width: 1500px) {
  #button2{
    left: 21%;
  }
  #button3{
    right: 21%;
  }
  #button4{
    left: 28%;
  }
  #button5{
    right: 28%;
  }
}
@media only screen and (max-width: 1500px) {...}
@media only screen and (max-width: 1400px) {...}
@media only screen and (max-width: 1300px) {...}
@media only screen and (max-width: 1200px) {...}

例如： jsfiddle only example

如何对齐圆形图像周围的按钮

2 个答案: