Question

＆＃13;

<html>
	<head>
		<style>
		.box
		{
			display : inline-block;
			padding : 10px;
		}
		
		</style>
	</head>
	<body>
	<div class="region">
		<div class="box" style="width:50px; height:50px; background-color:red"></div>
		<div class="box" style="width:100px; height:100px; background-color:blue"></div>
		<div class="box" style="width:50px; height:50px; background-color:green"></div>
		<div class="box" style="width:40px; height:40px; background-color:red"></div>
		<div class="box" style="width:80px; height:80px; background-color:blue"></div>
		<div class="box" style="width:50px; height:50px; background-color:green"></div>
	</div>
	</body>
</html>

＆＃13;

如果您运行代码段，则会看到所有块都在底座上对齐（就像保持在平面上一样）。什么需要在CSS中修改，以便所有 div 标记在上边界对齐？

如果我的问题不清楚，请尝试将此代码段的输出旋转180度。这就是我想要输出的方式。

Answer 1

由于他们inline-block只是将vertical-align设置为top

＆＃13;

.box {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}

＆＃13;

<div class="region">
  <div class="box" style="width:50px; height:50px; background-color:red"></div>
  <div class="box" style="width:100px; height:100px; background-color:blue"></div>
  <div class="box" style="width:50px; height:50px; background-color:green"></div>
  <div class="box" style="width:40px; height:40px; background-color:red"></div>
  <div class="box" style="width:80px; height:80px; background-color:blue"></div>
  <div class="box" style="width:50px; height:50px; background-color:green"></div>
</div>

＆＃13;

Answer 2

将vertical-align: top添加到.box

.box {
  display: inline-block;
  padding: 10px;
  vertical-align: top;  
}

<div class="region">
  <div class="box" style="width:50px; height:50px; background-color:red"></div>
  <div class="box" style="width:100px; height:100px; background-color:blue"></div>
  <div class="box" style="width:50px; height:50px; background-color:green"></div>
  <div class="box" style="width:40px; height:40px; background-color:red"></div>
  <div class="box" style="width:80px; height:80px; background-color:blue"></div>
  <div class="box" style="width:50px; height:50px; background-color:green"></div>
</div>

如何使所有不同大小的<div>块共享相同的顶部边界（边距）？</div>

2 个答案: