如何从下到上放置视图div

Question

我刚刚学习了编码世界，，，，需要一些帮助，，，我想做一个像这张图片一样的显示..， 在此处输入图片说明 但我真的不知道如何...我使用br，但是当它应用于移动版本时，它变得凌乱，，，或者可以“while”或“do”使它看起来像图片中的样子？？ 请帮忙

这是我凌乱的脚本

 .crop { width: 9%; height: auto; border:5px double; overflow: hidden; border-radius: 0px 20px; float:left; margin:0.3%; }

 <div class="crop">24</div> <div class="crop">23</div> <div class="crop">22</div> <div class="crop">21</div> <div class="crop">20</div> <div class="crop">19</div> <br><br> <div class="crop">18</div> <div class="crop">17</div> <div class="crop">16</div> <div class="crop">15</div> <div class="crop">14</div> <div class="crop">13</div> <div class="crop">12</div> <div class="crop">11</div> <div class="crop">10</div> <br><br> <div class="crop">9</div> <div class="crop">8</div> <div class="crop">7</div> <div class="crop">6</div> <div class="crop">5</div> <div class="crop">4</div> <div class="crop">3</div> <div class="crop">2</div> <div class="crop">1</div>

Answer 1

不太确定它在移动设备上应该如何表现。 你在寻找这样的东西：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>

<style>
.wrapper {
    display: flex;
}
.crop {
    width: 9%;
    height: auto;
    border:5px double;
    overflow: hidden;
    border-radius: 0px 20px;
    margin:0.3%;
}
</style>
</head>
<body>
  <div class="wrapper">
    <div class="crop">24</div>
    <div class="crop">23</div>
    <div class="crop">22</div>
    <div class="crop">21</div>
    <div class="crop">20</div>
    <div class="crop">19</div>
  </div>
  <div class="wrapper">
    <div class="crop">18</div>
    <div class="crop">17</div>
    <div class="crop">16</div>
    <div class="crop">15</div>
    <div class="crop">14</div>
    <div class="crop">13</div>
    <div class="crop">12</div>
    <div class="crop">11</div>
    <div class="crop">10</div>
  </div>
</body>
</html>

如何从下到上放置视图div

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-09-04 18:06:53

如何从下到上放置视图div

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-09-04 18:06:53

解决方案1
0 已采纳 2020-09-04 18:06:53