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

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

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 Grid，如下所示：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
}

如何在每个css下安排div元素

2 个答案: