Question

如何让这个DIV从同一高度开始，例如当您删除内容时，例如标题2上的段落，DIV就会放错位置（从不同的高度开始）谢谢

＆＃13;

.holder {
  width: 100%;
  vertical-align: middle;
  text-align: center;
}
.box {
  display: inline-block;
  width: 400px;
  height: 400px;
  margin: 15px 15px;
  border: 1px solid #333;
}

＆＃13;

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

＆＃13;

Answer 1

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>

甚至制作DIV标签

1 个答案: