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. java - mysql缓存问题2. PHP搜索功能的实现 哪里错了3. angular.js使用$resource服务把数据存入mongodb的问题。4. 新建index文件夹，然后把controller 以及文件index.php放入index文件夹。修改htaccess文件为扩展访问。但是访问的时候提示页面错误！请稍后再试。PHP版本正常，请老师解答5. mysql - 千万级数据表如何有效的变更字段？6. 请问一下，图片上传成功，但是后台对应文件夹里面却没有图片，这是什么原因？（已部署到服务器）7. 电脑上装了wamp后，再装了mysql，wamp上的mysql就不能用了8. php - SQL 一条语句查询出文章和对应的文章标签9. java - 触发器使两张表同时更新10. php+mysql 高并发 根据id 循环下载数据如何避免重复 （接口）
网公网安备