您的位置：首页技术文章
文章详情页

html - css3中多列高度 统一

浏览：172日期：2023-07-15 13:17:22

问题描述

<!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>

html - css3中多列高度 统一

怎么使第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之类的老标准的；如果像您这样使用也算一种自找苦吃；

标签： HTML
上一条：CSS3动画导致图片模糊下一条：css3 - 图片等比例缩放
相关文章：
1. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题2. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）3. angular.js - angularjs的自定义过滤器如何给文字加颜色？4. MYSQL新建用户设置可以远程访问的问题5. mysql - SQL操作时间的函数?6. java - mybatis怎么实现在数据库中有就修改,没有就添加7. 正则表达式 - python pandas的sep参数问题8. docker内创建jenkins访问另一个容器下的服务器问题9. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题！10. docker api 开发的端口怎么获取？
排行榜
$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题
$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题
1. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）
2. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题！
3. angular.js - angularjs的自定义过滤器如何给文字加颜色？
4. java - mybatis怎么实现在数据库中有就修改,没有就添加
5. 正则表达式 - python pandas的sep参数问题
6. docker内创建jenkins访问另一个容器下的服务器问题
7. mysql - SQL操作时间的函数?
8. MYSQL新建用户设置可以远程访问的问题
9. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？
10. docker api 开发的端口怎么获取？
热门标签