html - 我怎样才能在底部制作 100 及以下？

Question

我环顾四周，在这里找不到任何解决方案。我有这个 div，它被设计为在滚动条的底部有滚动框，我

还想要 1 到 100 的相反方向含义而不是从 div 的底部开始的 1 到 100 我希望 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>

标签： htmlcss

Answer 1

虽然你绝对可以使用 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>为您生成 s 的 javascript，因为制作/管理 100 可能会变得很痛苦。

您可以在此处阅读 CSS 计数器。

好的，我觉得写这个有点好笑，但我认为你可以这样做：

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>自己编写 s 的麻烦，这在没有 javascript 的情况下是有效的。