我怎样才能使100及以下的数字位于底部？

Question

我一直在四处张望，在这里找不到任何解决方案。我有一个设计为在滚动条底部具有滚动框的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>

Answer 1

尽管您绝对可以使用flex和order实现此目的，但最好使用list元素。

尝试：

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的情况下这是有效的。