使多個div圍繞一個圓圈在響應移動設備的中心

我希望div盒子內的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我used-

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

來源

2015-07-01 Sushil Thapa

也許這將幫助？ http://www.w3schools.com/cssref/css3_pr_transform-origin.asp – aahhaa

你可以包含你的代碼的jsfiddle/codepen和你的預期結果可能是什麼樣子的圖像？ – codedude

我這樣做是爲了在中心製作一個html賭場表，並且圍繞它的玩家div以及移動響應 –

試試這個，這將工作

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

來源

2015-07-01 17:17:40

是的！有效。非常感謝您解決我的問題。非常感謝。 –

我的工作@Sushil Thapa –

使多個div圍繞一個圓圈在響應移動設備的中心

回答

相關問題