how to place the view div from bottom to top
Question
I just learned coding world,,,, need some help please,,, I want to make a display like this picture .., but I really don't know how ... I use br, but when it is applied to the mobile version, it gets messy,,,, or can "while" or "do" make it look like in the picture ?? please help
this is my messy script
.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>
1 answers
solution1
0 ACCPTED 2020-09-04 18:06:53
Not quite sure what how it is supposed to behave on mobile. Are you looking for something like this:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to place DIV content on TOP of a Table
place the last element from bottom to top of stdclass object array
DIv top to bottom listing
JavaScript/PHP text appearing from bottom of div to top
xPath - from the bottom to top
How to recursively calculate from bottom to top using PHP?
How can I make a while() go from bottom to top?
How to access & Print Json data from Bottom to Top
How do I echo out from bottom to top in PHP
How to automatically scroll to bottom, and scroll to top if at bottom
Related Tags