Question

我刚刚学习了编码世界，请需要帮助，我想像这样的图片显示..， enter image description here 但我真的不知道该怎么做...我使用br，但是当将其应用于移动版本时，会变得混乱、、、、或者可以“同时”或“执行”使其看起来像图片中的那样？请帮助

这是我凌乱的脚本

.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 个答案: