javascript - CSS 将 SVG 排列到偏移网格中
问题描述
我的任务是使用 SVG 创建这样的背景,我使用的是 React。
我想知道是否有一种简单的 CSS 方法可以将它们排列在一个网格中,即第二行有一个偏移量。
我还需要使宽度动态化,即屏幕宽度有正确数量的图标。
我很确定我知道如何在 javascript 中做到这一点,但是如果有人知道一种非常有用的简单 CSS 方式。
目前它们排列成一个简单的行
.bg-icons{
z-index: 1;
position: absolute;
height: 200px;
overflow: visible;
svg{
font-size: 4em;
margin: 20px;
opacity: 0.05;
}
}
解决方案
您可以通过绘制一堆列并将所有奇数或偶数子元素偏移到每列的开头、中心或结尾来对 flexbox 做一些事情。
.bg-icons{
z-index: 0;
position: absolute;
height: 100px;
overflow: hidden;
width: 220px;
background-color: lightgreen;
display: flex;
flex-flow: column;
flex-wrap: wrap;
justify-content: space-between;
}
svg {
align-self: end;
flex-grow: 1;
flex-basis: 20%;
margin: 1px;
opacity: 0.5;
}
svg:nth-child(odd) {
align-self: center;
}
<div class="bg-icons">
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
<svg height="20" width="20">
<circle cx="10" cy="10" r="10" fill="pink" />
</svg>
</div>
推荐阅读
- javascript - 如何在angularjs中单击按钮上的ng重复按字母升序和字母降序排序
- html - 对齐按钮 HTML/Bootstrap 中的元素
- javascript - 如何在网页底部创建一个固定的控制面板?
- math - 如何以最大值绘制图形
- dart - How to fix type '_InternalLinkedHashMap
' is not a subtype of type 'List ' in type cast - linux - Why do quotes in shell scripts behave differently from quotes in shell commands?
- c - _loaddqu_LE 内部存储以相反的顺序
- python - Id 应该是相似的,但没有人能解释我为什么
- php - 遇到格式不正确的数值 - 购物车篮
- javascript - 拦截javascript中的函数调用