CSS中的自動(dòng)換列功能可以通過設(shè)置column-count
屬性來實(shí)現(xiàn),這個(gè)屬性可以指定元素應(yīng)該被分成多少列,以及每列的高度和寬度,下面是一個(gè)簡單的示例,展示如何使用CSS來設(shè)置li
元素的自動(dòng)換列:
HTML代碼:
<ul id="myList"> <li>項(xiàng)目1</li> <li>項(xiàng)目2</li> <li>項(xiàng)目3</li> <li>項(xiàng)目4</li> <li>項(xiàng)目5</li> <li>項(xiàng)目6</li> <li>項(xiàng)目7</li> <li>項(xiàng)目8</li> <li>項(xiàng)目9</li> <li>項(xiàng)目10</li> <li>項(xiàng)目11</li> <li>項(xiàng)目12</li> <li>項(xiàng)目13</li> <li>項(xiàng)目14</li> <li>項(xiàng)目15</li> <li>項(xiàng)目16</li> <li>項(xiàng)目17</li> <li>項(xiàng)目18</li> <li>項(xiàng)目19</li> <li>項(xiàng)目20</li> <li>項(xiàng)目21</li> <li>項(xiàng)目22</li> <li>項(xiàng)目23</li> <li>項(xiàng)目24</li> <li>項(xiàng)目25</li> <li>項(xiàng)目26</li> <li>項(xiàng)目27</li> <li>項(xiàng)目28</li> <li>項(xiàng)目29</li> <li>項(xiàng)目30</li> <li>項(xiàng)目31</li> <li>項(xiàng)目32</li> <li>項(xiàng)目33</li> <li>項(xiàng)目34</li> <li>項(xiàng)目35</li> <li>項(xiàng)目36</li> <li>項(xiàng)目37</li> <li>項(xiàng)目38</li> <li>項(xiàng)目39</li> <li>項(xiàng)目40</li> <li>項(xiàng)目41</li> <li>項(xiàng)目42</li> <li>項(xiàng)目43</li> <li>項(xiàng)目44</li> <li>項(xiàng)目45</li> <li>項(xiàng)目46</li> <li>項(xiàng)目47</li> <li>項(xiàng)目48</li> <li>項(xiàng)目49</li> <li>項(xiàng)目50</li> <li>項(xiàng)目51</li> <li>項(xiàng)目52</li> <li>項(xiàng)目53</li> <li>項(xiàng)目54</li> <li>項(xiàng)目55</li> <li>項(xiàng)目56</li> <li>項(xiàng)目57</li> <li>項(xiàng)目58</li> <li>項(xiàng)目59</li> <li>項(xiàng)目60</li> <li>項(xiàng)目61</li> <li>項(xiàng)目62</li> <li>項(xiàng)目63</li> <li>項(xiàng)目64</li> <li>項(xiàng)目65</li> <li>項(xiàng)目66</li> <li>項(xiàng)目67</li> <li>項(xiàng)目68</li> <li>項(xiàng)目69</li> <li>項(xiàng)目70</li> <li style="page-break-after: always;">更多項(xiàng)...</ li > } ``` CSS代碼: ```css #myList { column-count: 3; column-gap: 20px; column-fill: auto; } ``` 在這個(gè)示例中,#myList
元素被分成了3列,每列之間有20像素的間隔。column-fill
屬性設(shè)置為auto
將自動(dòng)填充到所有列中,您可以根據(jù)需要調(diào)整這些值。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。