如何在彼此的css下排列div元素答案

【问题标题】：How to arrange div elements under each other css如何在彼此的css下排列div元素
【发布时间】：2018-03-10 21:22:45
【问题描述】：

请帮助我将 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>

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

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

【讨论】：

那么渐变呢？这是主要问题
有几个选项 - 您可以让堆栈透明并在堆栈上放置渐变。或者为每个块添加渐变。我只是想举例说明如何使用 Grid 轻松实现这种布局。
不是 OP :) 我知道该怎么做 ;) 但它应该在你的问题中，因为 OP 要求它
我累了，要睡觉了！但是你去吧，我已经更新了笔：P

【解决方案2】：

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

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>

【讨论】：