我一直在四处寻找,但在这里找不到任何解决方案。我有这个 div,它被设计成在滚动条底部有滚动框,我
还想要 1 到 100 的相反方向意味着而不是 1 到 100 从 div 的底部开始我想要 100 到 1 而不是从底部开始
这是我的代码
#a{
display: flex;
flex-direction: column-reverse;
height: 300px;
width: 300px;
background-color: red;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
overflow: auto;
}
<div id='a'>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
<h1>51</h1>
<h1>52</h1>
<h1>53</h1>
<h1>54</h1>
<h1>55</h1>
<h1>56</h1>
<h1>57</h1>
<h1>58</h1>
<h1>59</h1>
<h1>60</h1>
<h1>61</h1>
<h1>62</h1>
<h1>63</h1>
<h1>64</h1>
<h1>65</h1>
<h1>66</h1>
<h1>67</h1>
<h1>68</h1>
<h1>69</h1>
<h1>70</h1>
<h1>71</h1>
<h1>72</h1>
<h1>73</h1>
<h1>74</h1>
<h1>75</h1>
<h1>76</h1>
<h1>77</h1>
<h1>78</h1>
<h1>79</h1>
<h1>80</h1>
<h1>81</h1>
<h1>82</h1>
<h1>83</h1>
<h1>84</h1>
<h1>85</h1>
<h1>86</h1>
<h1>87</h1>
<h1>88</h1>
<h1>89</h1>
<h1>90</h1>
<h1>91</h1>
<h1>92</h1>
<h1>93</h1>
<h1>94</h1>
<h1>95</h1>
<h1>96</h1>
<h1>97</h1>
<h1>98</h1>
<h1>99</h1>
<h1>100</h1>
</div>
最佳答案
虽然您绝对可以通过 flex 和 order 实现这一点,但您最好还是使用列表元素。
尝试:
ul {
list-style-type:none;
counter-reset:item 101;
}
ul > li {
counter-increment:item -1;
}
ul > li:before {
content:" " counter(item);
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>....</li>
</ul>
此外,您可能想编写一些生成 <li>
的 javascript这是给你的,因为制作/管理 100 可能会变得痛苦。
您可以阅读 CSS 计数器 here .
好吧,我觉得写这个有点好笑,但我认为你可以这样做:
for( let i=0; i<100; i++ ) {
$( '#a' ).append( `<h1>${ i + 1 }</h1>` );
}
#a {
transform: rotate( 180deg );
}
#a > h1 {
transform: rotate( 180deg );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='a'>
</div>
如果您不厌其烦地编写 <h1>
,这在没有 javascript 的情况下也是有效的是你自己。
关于html - 我怎样才能在底部制作 100 及以下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52732424/