如何让hover触发缩放的块级元素以inline-block实现5x5排列

你现有代码有两个核心问题：一是直接给所有div标签加样式会误选布局容器，二是没有给方块设置行内块属性、也没生成足够数量的方块，按下面修改即可：

核心修改点 #

• 不要直接用标签选择器选div，给每个小方块单独加类名，避免样式冲突
• 给小方块设置display: inline-block实现横向排列，加少量外边距拉开间距，再加vertical-align: middle解决行内块默认对齐错位的问题
• 外层容器固定宽度，刚好能放下一行5个方块+间距，就能自动折行成5×5的矩阵
• 悬停效果推荐用transform: scale()实现，比直接改宽高更顺滑，也不会挤压周围方块的位置，如果你坚持改宽高也可以，记得给方块加固定对齐方式避免布局跳动

完整可运行代码 #

CSS部分 #

/* 外层容器，宽度刚好适配5个方块+左右间距 */
.matrix {
  width: 570px;
  margin: 0 auto;
}
/* 小方块基础样式 */
.block {
  width: 100px;
  height: 100px;
  background: gray;
  /* 核心属性：设置行内块实现横向排列 */
  display: inline-block;
  margin: 7px;
  /* 解决行内块默认基线对齐导致的错位问题 */
  vertical-align: middle;
  /* 过渡动画，transform缩放比改宽高性能更好 */
  transition: transform 0.5s ease;
  /* 方块内文字居中 */
  text-align: center;
  line-height: 100px;
  font-family: Georgia, serif;
}
/* 悬停放大效果 */
.block:hover {
  transform: scale(1.3);
}

HTML部分 #

<div class="matrix">
  <!-- 共25个方块，容器宽度限制下一行排5个自动折行 -->
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
  <div class="block">Lorem ipsum</div>
</div>

如果你一定要用改宽高的方式实现放大，把hover部分的transform: scale(1.3)换回你原来的宽高设置即可，记得给.block加上overflow: hidden防止放大时文字溢出。

内容的提问来源于stack exchange，提问作者Andras Erat