我尝试使响应菜单围绕圆形图像。屏幕分辨率更改时出现我的问题，按钮不会停留在更改位置的圆形图片旁边。我如何将这个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/
最佳答案
我最近遇到过这样的事！
媒体查询也可以完成工作，但我认为以百分比动态播放要容易得多！
<!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>关于jquery - 如何在圆形图像周围对齐按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34029029/