如何從下到上放置視圖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