計算圍繞另一個div的小div的CSS定位？

Question

這更多的是「這可能沒有一個愚蠢的代碼？」並瞭解如何去做。如果我有一個飯桌上的CSS表示，想定位它周圍4-10椅子，我可能會造成這樣的div（內嵌顯示我在做什麼緊湊）

<div style="position:relative;width:200px;height:200px;"> 
<div id="table" style="position:absolute;width:100px;height:100px;">&nbsp;</div> 
<div id="chair1" style="position:absolute;width:10px;height:10px;">&nbsp; </div> 
<div id="chair2" style="position:absolute;width:10px;height:10px;">&nbsp; </div> 
<div id="chair3" style="position:absolute;width:10px;height:10px;">&nbsp;</div> 
<div id="chair4" style="position:absolute;width:10px;height:10px;">&nbsp;</div> 
</div> 

哪裏有一div代表4把椅子和一張桌子。但是如果我的動態創建的代碼需要創建6,8或10把椅子呢？我將如何在桌子周圍以均勻的速度將它們動態地分隔開來？思考？

Answer 1

您需要JavaScript才能設置椅子。什麼讓你開始：

HTML：

<div id="room"> 
    <div id="table"></div> 
</div> 

CSS：使用

#room { 
    position:relative; 
    width:200px; 
    height:200px; 
} 
#table { 
    background:blue; 
    position:absolute; 
    width:100%; 
    height:100%; 
} 
.chair { 
    background:red; 
    position:absolute; 
    width:10px; 
    height:10px; 
} 

JavaScript的jQuery的：

var $chair = $('<div class="chair">'); 
var $room = $('#room'); 
var top = 0; 
var left = 0; 
var stepSize = 20; 

var createChairs = function(amount) { 
    for (var i = 0; i < amount; i++) { 
    var newChair = $chair.clone(); 
    newChair.css({top: top, left: left}); 
    $room.append(newChair); 
    left = left + stepSize; 
    } 
} 

createChairs(10); 

創建其中傳遞的椅子量的函數你希望，那麼你繞過邊界，並設置儘可能多的椅子，希望。這個例子不包括邊框處理，但它只是將椅子從左上角設置到右上角。但處理邊界應該很容易在幾個條件下實現。你應該已經明白了。

小提琴：https://jsfiddle.net/s0oady2q/

Answer 2

我真不知道你怎麼能做到這一點沒有至少JavaScript的一點點。實際上，即使您嘗試使用某種類型的魔法，您仍然會遇到calc()不支持sin()或cos()調用的問題。

這裏是一個小的，純JavaScript的方式得到你想要的，雖然什麼：

/*jslint browser:true*/ 
 

 
(function(doc) { 
 
    "use strict"; 
 

 
    var TABLE_RADIUS = 100; 
 

 
    function each(arr, cb) { 
 
    return Array.prototype.forEach.call(arr, cb); 
 
    } 
 

 
    function deg2rad(deg) { 
 
    return ((deg * Math.PI)/180); 
 
    } 
 

 
    function pos(deg, r) { 
 
    return { 
 
     x: (r * (Math.cos(deg2rad(deg)))), 
 
     y: (r * (Math.sin(deg2rad(deg)))) 
 
    }; 
 
    } 
 

 
    function chairIterator(chair, chairIndex, chairArr) { 
 
    var circPos = pos(chairIndex/chairArr.length * 360, TABLE_RADIUS); 
 
    chair.style.top = circPos.y + "px"; 
 
    chair.style.left = circPos.x + "px"; 
 
    } 
 

 
    function tableIterator(table) { 
 
    var chairs = table.querySelectorAll(".chair"); 
 
    each(chairs, chairIterator); 
 
    } 
 

 
    function main() { 
 
    var tables = document.querySelectorAll(".table"); 
 
    each(tables, tableIterator); 
 
    } 
 

 
    doc.addEventListener("DOMContentLoaded", main); 
 
}(document));

.table { 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 10px; 
 
    height: 10px; 
 
    top: 50%; 
 
    left: 50%; 
 
    background-color: red; 
 
} 
 
.table .chair { 
 
    position: absolute; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: blue; 
 
}

<div class="table"> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
    <div class="chair"></div> 
 
</div>