Question

我希望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>

Answer 1

试试这个会起作用

＆＃13;

<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>

＆＃13;

使多个div围绕中心的圆圈，以响应移动设备

1 个答案: