文章詳情頁
css - flex(box?)書架布局的問題
瀏覽:78日期:2023-07-20 11:06:41
問題描述
目前有如下結構
<p class='book-list'> <p class='cover'></p> <p class='cover'></p> <p class='cover'></p> <p class='cover'></p> <p class='cover'></p></p>
我通過flex布局,只能做出如下效果,
有沒有在不改變dom結構的情況下,讓最后一行如果不與其它行數目一樣,只能靠左顯示,如同iBook一樣。
如果不行,也請提供其它更好的方案不用考慮兼容問題!
問題解答
回答1:flex-flow: row wrapjustify-content: flex-start可以試試看,我項目里有用類似的,但是現在不在電腦前面。只記得這么多??茨愕膱D片應該是對齊的問題
晚上回來試了一下,看看這樣做行不:http://codepen.io/charleyw/pen/vLXQRM
還是那個思路給最后一行補齊同等數量的元素,讓flex的自動伸縮能生效。不過沒有用JS,而是在一開始創建DOM的時候就額外添加了足夠多的元素,足夠多是多到什么程度是根據你一行最多能顯示多少個來決定的,例如在最大的屏幕上你能顯示20個,那么你就添加19個空元素,這樣不管寬度怎么變,都能保證最后一行(不算空元素)永遠都跟上一行有同樣的元素個數,就能保證flex樣式是一樣的。
回答2:上demo啊
標簽:
CSS
相關文章:
1. Python爬蟲如何爬取span和span中間的內容并分別存入字典里?2. mysql - 把一個表中的數據count更新到另一個表里?3. 請教使用PDO連接MSSQL數據庫插入是亂碼問題?4. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題5. visual-studio - Python OpenCV: 奇怪的自動補全問題6. linux - Ubuntu下編譯Vim8(+python)無數次編譯失敗7. node.js - nodejs開發中常用的連接mysql的庫8. mysql 查詢身份證號字段值有效的數據9. 視頻文件不能播放,怎么辦?10. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處
排行榜
