文章詳情頁
css3 - 純CSS實現固定高度等分(等分個數不定)
瀏覽:195日期:2023-08-07 17:56:14
問題描述
有這樣一個需求。對一個固定20*200像素的容器垂直方向等分。可能分成任意份數。要求每份高度相等。求純CSS的實現方案。
水平等分可以通過box-flex來解決。垂直方向的沒思路,求高手指導~感激不盡~
樓下大大們提出了box flex可以指定方向。。。之前想當然以為只有水平方向了。除了這種方式,可有兼容性寫法???
問題解答
回答1:http://jsfiddle.net/3LXJ5/
回答2:<style>.container { width: 20px; height: 200px; display: flex; flex-direction: column;}.row { flex: 1; background-color: lightblue; border: 1px solid #ccc;}</style><p class='container'> <p class='row'>1</p> <p class='row'>2</p> <p class='row'>3</p> <p class='row'>4</p></p>
效果如下:

標簽:
CSS
相關文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?4. javascript - 移動端上不能實現拖拽布局嗎?5. 實現bing搜索工具urlAPI提交6. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化7. javascript - nodejs關于進程間發送句柄的一點疑問8. phpstudy8.1支持win11系統嗎?9. 如何解決Centos下Docker服務啟動無響應,且輸入docker命令無響應?10. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~
排行榜

網公網安備