我希望 div 框内的 div 围绕圆形图像，并且我想让它响应移动显示。我的意思是我也想在移动设备中查看 div 周围的圆圈。这是我的代码-
<div class="circle">
<img src="images/circle.jpg height="500px" width="500px" alt="circle">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
下面是我用的css-
<style>
.circle{position:relative}
.circle img{max-width:100%; height:auto}
.boxes{position:absolute; top:0; left:0}
.boxes div{height:50px; width:50px; display:inline-block}
</style>
最佳答案
试试这个会起作用
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.divname{
height: 200px;
width: 32%;
border:1px solid red;
float: left;
}
.notadiv{
visibility: hidden;
}
</style>
<script>
function setwidth() {
var part = (window.innerWidth / 3) - 30;
function setwidth() {
var part = (window.innerWidth / 3) - 30;
alert(part.toString());
var x = document.getElementsByClassName("divname");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.width = part.toString();
}
}
}
</script>
</head>
<body onresize="setwidth();">
<div style="text-align: center;">
<div class='divname notadiv' ></div>
<div class='divname' >1</div>
<div class='divname notadiv' ></div>
<div class='divname' >2</div>
<div class='divname' style="background-image: url('images/circle.jpg');border:0px solid transparent;background-size: contain;background-repeat: no-repeat;background-position: center;"></div>
<div class='divname' >3</div>
<div class='divname notadiv' ></div>
<div class='divname' >4</div>
<div class='divname notadiv' ></div>
</div>
</body>
</html>关于html - 使多个div在中心环绕一个圆圈并响应移动设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31165146/