Berechnung der CSS-Positionierung kleiner divs um ein anderes div?

Question

Dies ist mehr im Bereich "Ist dies ohne eine dumme Menge an Code möglich?" und um ein paar Ideen zu bekommen, wie man das anstellt. Wenn ich eine CSS-Darstellung einer Tafel hatte, und wollte 4-10 Stühlen drum herum positionieren, könnte ich die divs wie diese erstellen (inline zu zeigen, was ich tue kompakt)

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

Wo ein div um alles zu halten und ein div um 4 Stühle und einen Tisch zu repräsentieren. Was aber, wenn mein dynamisch erstellter Code 6, 8 oder 10 Stühle benötigt? Wie würde ich sie dynamisch um den Tisch vom Tisch abheben? Gedanken?

Answer 1

Sie benötigen JavaScript, um die Stühle zu setzen. Etwas zum Einstieg:

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 mit 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); 

Sie erstellen eine Funktion, die Sie die Menge von Stühlen passieren du wünschst, dann gehst du um die Grenze herum und stellst so viele Stühle wie gewünscht. In diesem Beispiel ist die Grenzbehandlung noch nicht enthalten, d. H. Es werden nur Stühle von links oben nach rechts oben gesetzt. Aber der Umgang mit Grenzen sollte mit ein paar Bedingungen leicht machbar sein. Du hättest die Idee bekommen sollen.

Fiddle: https://jsfiddle.net/s0oady2q/

Answer 2

Ich weiß wirklich nicht, wie Sie dies zu tun wäre in der Lage, ohne zumindest ein wenig JavaScript. In der Tat, auch wenn Sie versucht haben, eine Art von calc() Magie zu verwenden, würden Sie immer noch auf das Problem stoßen, dass calc()sin() oder cos() Aufrufe nicht unterstützt.

Hier ist eine kleine, reine JavaScript Art und Weise zu bekommen, was Sie aber wollen:

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