html - css3中多列高度 統一
問題描述
<!DOCTYPE html><html lang='zh-cmn-Hans'><head><meta charset='utf-8' /><title>column-fill_CSS參考手冊_web前端開發參考手冊系列</title><meta name='author' content='Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com' /><style>body{font:14px/1.5 georgia,serif,sans-serif;}p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16px;}.test{ width:700px; border:10px solid #000; -moz-column-count:2; -moz-column-gap:20px; -moz-column-rule:3px solid #090; -moz-column-fill:balance; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:3px solid #090; -webkit-column-fill:balance; column-count:2; column-gap:20px; column-rule:3px solid #090; column-fill:balance;}.test p{ -moz-column-break-before:always; -webkit-column-break-before:always; column-break-before:always;}</style></head><body><h1>column-fill:balance</h1><p class='test'> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</p> <p>This module describes multi-column layout in CSS. By using functionality described in this document</p></p></body></html>
怎么使第2個p段落高度跟第一個一致，我這里已經加了column-fill:balance;屬性。求高手分析下，謝謝！
問題解答
回答1：display: block；再設置寬高不好？
回答2：<!DOCTYPE html><html lang='zh-cmn-Hans'><head><meta charset='utf-8' /><title>column-fill_CSS參考手冊_web前端開發參考手冊系列</title><meta name='author' content='Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com' /><style>body{font:14px/1.5 georgia,serif,sans-serif;}p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16px;}.test{ width:700px; border:10px solid #000; -moz-column-count:2; -moz-column-gap:20px; -moz-column-rule:3px solid #090; -moz-column-fill:balance; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:3px solid #090; -webkit-column-fill:balance; column-count:2; column-gap:20px; column-rule:3px solid #090; column-fill:balance;}</style></head><body><h1>column-fill:balance</h1><p class='test'> 這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；這個是column要解決的CSS問題，也算是column真正使用的領域；</p></body></html>
應對您的解決方案：
<!DOCTYPE html><html lang='zh-cmn-Hans'><head><meta charset='utf-8' /><title>column-fill_CSS參考手冊_web前端開發參考手冊系列</title><meta name='author' content='Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com' /><style>body{font:14px/1.5 georgia,serif,sans-serif;}p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16px;}.test{ width:700px; border:10px solid #000; -moz-column-count:2; -moz-column-gap:20px; -moz-column-rule:3px solid #090; -moz-column-fill:balance; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:3px solid #090; -webkit-column-fill:balance; column-count:2; column-gap:20px; column-rule:3px solid #090; column-fill:balance;}.test p{ -moz-column-break-before:always; -webkit-column-break-before:always; column-break-before:always; min-height:6em;}</style></head><body><h1>column-fill:balance</h1><p class='test'> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</p> <p>This module describes multi-column layout in CSS. By using functionality described in this document</p></p></body></html>
覺得建議您先想一下column的出現時為了解決什么問題的；起碼不是替代float之類的老標準的；如果像您這樣使用也算一種自找苦吃；
相關文章：
1. 如何解決docker宿主機無法訪問容器中的服務？2. springboot - spring-boot-starter-thymeleaf對沒有結束符的HTML5標簽解析出錯3. javascript - 求助Angular 跨控制器調用方法可行嗎?4. 我 想好好學精通一門技術，大家用的走過的路，幫我指點指點唄 讓我少走了彎路和坑的苦 ，自學，自己摸5. html - css布局問題，背景用用div畫的三角形是否用absolute與z-index來定位與規定在下方是否是個好方案6. 正則表達式 - nginx 正則，如何匹配不以/結尾且不以.xml .html .htm結尾7. 淺談vue生命周期共有幾個階段？分別是什么？8. index.php錯誤，求指點9. Android 高德地圖如何移除添加的某個marker？10. javascript - 函數聲明和匿名函數有什么不同？（前端小白求助。。）
網公網安備