我必须围绕元素的中点 float 多个元素。目前在 css 中使用 display: table
/display: table-cell
解决了这个问题。
这个解决方案的问题是每组 block 都必须包裹在一个额外的元素中,这使得响应式布局变得困难。此外,可见顺序不正确。
我想使用 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>
理想情况下,布局会尊重窗口的宽度和高度。这样 block 总是适合当前的屏幕尺寸。可以用这样的东西来完成:
var cols = Math.floor(innerWidth / children[0].clientWidth)
var rows = Math.round(innerHeight / children[0].clientHeight)
我已经搜索了一段时间,但没有找到任何现有的解决方案。最接近的是:
- Position icons into circle
- Centre multiple elements within div using css
- Other elements wrap around center positioned div
顺便说一句,我的灵感来自 https://typekit.com/ ;)
最佳答案
知道了...一个基于百分比的解决方案,它创建了一个均匀间隔的网格。
感觉有点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>
抱歉,代码没有注释...
关于javascript - 围绕父级中点居中多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36401493/