请帮助我将 div 元素排列在彼此之下，这样它们在这个屏幕截图上看起来就像一个均衡器 Equalizer , 建议如何从列表中删除点。我已经尝试过使用 css 属性(列表样式类型:无)删除这些点的常用方法。
还有一件事，如何制作渐变颜色的均衡器，从上到下从浅到深。
提前致谢。
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
}
li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
ul li {
background: linear-gradient(orange, yellow);
margin: 5px;
}
.blocks {
position: relative;
top: 40px;
left: 15px;
display: inline-block;
width: 40px;
height: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Equalizer</title>
<link rel="stylesheet" href="equalizer.css">
</head>
<body>
<div class="blocks">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<div class="blocks">
<ul>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>-->
</div>
<div class="blocks">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<div class="blocks">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<div class="blocks">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<div class="blocks">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--<div></div>
<div></div>
<div></div>-->
</div>
</body>
</html>最佳答案
使用 CSS 网格，像这样:https://codepen.io/matt5409/pen/zWxVqK
魔法在于网格布局:
.col{
display:grid;
grid-template-columns:repeat(3, 1fr); // repeat 3 columns
grid-column-gap: 2px; // 2px gap between
align-items: end; // ensure items align at the bottom
}
关于html - 如何在彼此的css下排列div元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49214159/