使DIV标签均匀化
使DIV标签均匀化
提问于 2016-03-25 05:48:37
如何使这个DIV以相同的高度开始，即当您删除内容(如标题2中的段落)时，DIV变得不正确(从不同的高度开始)
.holder {
width: 100%;
vertical-align: middle;
text-align: center;
}
.box {
display: inline-block;
width: 400px;
height: 400px;
margin: 15px 15px;
border: 1px solid #333;
}<div class="holder">
<div class="box">
<h4>title 1</h4>
<p>
This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers
</p>
</div>
<div class="box">
<h4>title 2</h4>
<p>
This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers
</p>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-25 05:53:18
max-height和vertical-align: top；会帮助你。
vertical-align: top工作的主要原因是它被应用于内联块元素。如果.box上的显示只是block，它就不能工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>height</title>
<script src="jquery.js"></script>
<script>
$(function(){
})
</script>
<style>
.holder {
width: 100%;
vertical-align: top;
text-align: center;
}
.box {
display: inline-block;
width: 40%;
min-height: 400px;
margin: 15px 15px;
border: 1px solid #333;
vertical-align: top;
}
</style>
</head>
<body>
<div class="holder">
<div class="box">
<h4>title 1</h4>
<p>
This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers
</p>
</div>
<div class="box">
<h4>title 2</h4>
<p>
</p>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36214741
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号