如何排列 div 个元素 css

Question

请帮我安排 div 个元素，这样它们在这个屏幕截图上看起来就像一个均衡器 Equalizer，建议如何从列表中删除点。我已经尝试使用 css 属性 (list-style-type: none).

删除这些点的常用方法

还有一件事，如何制作渐变颜色的均衡器，从上到下从浅到深。

提前致谢。

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

Answer 1

我会考虑一个元素来实现这种布局，并使用高度来控制大小：

body {
  background: #333333
}

.equ {
  display: inline-block;
  width: 40px;
  height: 180px;
  border-radius: 5px 5px 0 0;
  background: 
  linear-gradient(transparent 80%, #333333 20%)0 0/100% 40px, 
  linear-gradient(orange, yellow);
}

<div class="equ">
</div>
<div class="equ" style="height:60px">
</div>
<div class="equ" style="height:220px">
</div>
<div class="equ" style="height:140px">
</div>

Answer 2

使用 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
}

如何排列 div 个元素 css

How to arrange div elements under each other css

html

css

linear-gradients