將多個元素圍繞父中點居中

Question

我必須在元素的中點周圍浮動多個元素。 這目前在 css 中通過使用display: table / display: table-cell 。

這個解決方案的問題是每組塊都必須包含在一個額外的元素中，這使得布局這種響應式變得困難。 此外，可見順序不正確。

我想使用 javascript，通過使用position: absolute來對齊元素，但我不知道如何計算偏移量。 另一種選擇可能是動態創建每個組（取決於窗口寬度/高度），並使用實際的 css（如下）來對齊元素。

 html, body { height: 100%; } .blocks { display: table; margin-left: auto; margin-right: auto; max-width: 40em; width: 100%; height: 100%; } .group { display: table-cell; vertical-align: middle; } .block { background-color: rgb(50, 50, 50); color: rgb(255, 255, 255); height: 8em; line-height: 8em; margin: 1em; text-align: center; width: 8em; } /* Debug ------------------------------------------------ */ .blocks { counter-reset: tile; } .block:before { counter-increment: tile; content: counter(tile); }

 <!-- small screens --> <div class="blocks"> <div class="group"> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> </div> </div> <hr> <!-- large screens --> <div class="blocks"> <div class="group"> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> </div> </div> <!-- huge screens --> <div class="blocks"> <div class="group"> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="group"> <div class="block"></div> <div class="block"></div> </div> </div>

...為了完整性， position:absolute方法：

 .blocks { margin-left: auto; margin-right: auto; max-width: 40em; position: relative; } .block { background-color: rgb(0, 225, 225); border: 1px solid white; box-sizing:border-box; height: 8em; line-height: 8em; position: absolute; text-align: center; width: 8em; } .block:nth-of-type(1) { top: 8em; left: 0; } .block:nth-of-type(2) { top: 4em; left: 8em; } .block:nth-of-type(3) { top: 0; left: 16em; } .block:nth-of-type(4) { top: 4em; left: 24em; } .block:nth-of-type(5) { top: 8em; left: 32em; } .block:nth-of-type(6) { top: 16em; left: 0; } .block:nth-of-type(7) { top: 12em; left: 8em; } .block:nth-of-type(8) { top: 8em; left: 16em; } .block:nth-of-type(9) { top: 12em; left: 24em; } .block:nth-of-type(10) { top: 16em; left: 32em; } .block:nth-of-type(11) { top: 20em; left: 8em; } .block:nth-of-type(12) { top: 16em; left: 16em; } .block:nth-of-type(13) { top: 20em; left: 24em; } .block:nth-of-type(14) { top: 24em; left: 16em; } /* Debug ------------------------------------------------ */ .blocks { counter-reset: tile; } .block:before { counter-increment: tile; content: counter(tile); }

 <div class="blocks"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div>

理想情況下，布局會同時考慮窗口寬度和高度。 這樣塊總是適合當前的屏幕尺寸。 可以用這樣的東西來完成：

var cols = Math.floor(innerWidth / children[0].clientWidth)
var rows = Math.round(innerHeight / children[0].clientHeight)

我已經搜索了一段時間，但沒有找到任何現有的解決方案。 最接近的是：

• 將圖標定位成圓圈
• 使用 css 將 div 中的多個元素居中
• 其他元素環繞中心定位的 div

順便說一句，我的靈感來自https://typekit.com/ ;)

Answer 1

明白了... 基於百分比的解決方案，它創建了一個均勻間隔的網格。

感覺有點hacky，但應該有效：

 function alignAround(elements, columns, gutter, weight) { var width = ((2 / 3) * 100) - (gutter / 2) var push = 100 - width var gutterCount = columns - 1 var repeatAt = (columns * 2) - 1 var firstShort = 1 var lastShort = gutterCount var lastLong = repeatAt if (weight === 'odd') { firstShort = columns + 1 lastShort = repeatAt lastLong = columns } if (columns > 1) { width = ((100 - (gutter * gutterCount)) / columns / 100) * 100 push = (width + gutter) / 2 } return Array.prototype.forEach.call(elements, function(element, index) { var styles = { width: width, height: width } if (columns > 1) { var i = index + 1 styles.marginRight = gutter if ((i - firstShort) % repeatAt === 0) { styles.marginLeft = push } if ((i - lastShort) % repeatAt === 0) { styles.marginRight = push } if ((i - lastLong) % repeatAt === 0) { styles.marginRight = 0 } } else if (columns === 1) { if (index & 1) { styles[weight === 'odd' ? 'margin-left' : 'margin-right'] = push } else { styles[weight === 'odd' ? 'margin-right' : 'margin-left'] = push } } for (var key in styles) { element.style[key] = styles[key] + '%' } }) } alignAround(document.querySelectorAll('.block'), 4, 2)

 html, body, .blocks { height: 100%; } .block { background: #e44; float: left; } /* Debug ------------------------------------------------ */ .blocks { counter-reset: tile; } .block:before { counter-increment: tile; content: counter(tile); }

 <div class="blocks"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div>

_{抱歉，代碼未注釋...}

Answer 2

flexbox網格怎么樣？ 您可以通過flexbox的order屬性對不同寬度的項目重新排序。 請參閱下面的網格快速示例。

 .list { list-style: none; display: flex; margin: 0; padding: 0; flex-flow: column wrap; align-items: center; align-content: center; justify-content: center; height: 500px; box-sizing: border-box; } .box-wrapper { background: lightblue; width: 100px; height: 100%; border: 1px solid blue; box-sizing: border-box; display: flex; flex-flow: column wrap; align-items: center; align-content: center; justify-content: center; } .box { background: red; border: 1px solid darkred; width: 100px; height: 100px; box-sizing: border-box; }

 <ul class="list"> <li class="box-wrapper"> <div class="box"></div> <div class="box"></div> </li> <li class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </li> <li class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </li> <li class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </li> <li class="box-wrapper"> <div class="box"></div> <div class="box"></div> </li> </ul>