如何合理调整Div宽度并维持布局以容纳主机名？

首先，问题出在直接修改inline-block元素的宽度时，没考虑到元素间的默认空格和栅格布局的自适应逻辑，导致方块无法按预期排列。这里有两种可靠的解决方案，优先推荐Flexbox这种现代布局方式：

方案一：用Flexbox重构布局（推荐） #

Flexbox能更灵活地控制元素排列，自动处理间距和换行，同时稳稳维持每行3个方块的布局：

/* 把父容器改成flex容器 */
.col-md-4 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 替代margin，更干净地控制方块间的间距 */
}

/* 设置每个方块的自适应宽度 */
.col-md-4 .row div {
  flex: 1 1 calc(33.333% - 10px); /* 每行3个，减去gap的宽度 */
  min-width: 120px; /* 最小宽度，防止窗口缩小时方块过窄 */
  margin: 0; /* 移除原来的margin，改用gap */
  padding: 8px; /* 给文本留足够内边距，避免挤在一起 */
  background: #f5f5f5;
  border-radius: 4px;
  /* 让文本自动换行，轻松容纳两个主机名 */
  word-wrap: break-word;
  white-space: normal;
}

为什么这个方案靠谱？ #

• flex-wrap: wrap确保空间不足时自动换行，不会溢出容器
• flex: 1 1 calc(33.333% - 10px)让每个方块平分父容器宽度，减去间距后刚好每行3个
• gap替代margin，彻底避免inline-block元素间的空格问题，布局更稳定

方案二：修复inline-block布局（兼容旧浏览器） #

如果不想用Flexbox，可以通过消除inline-block元素间的空格，再精确计算宽度来修复：

/* 消除inline-block元素间的默认空格 */
.col-md-4 .row {
  font-size: 0;
}

/* 设置方块宽度，保证每行3个 */
.col-md-4 .row div {
  display: inline-block;
  width: calc(33.333% - 20px); /* 每行3个，减去左右各10px的margin */
  margin: 10px;
  font-size: 14px; /* 恢复正常字体大小 */
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  /* 文本换行设置 */
  word-wrap: break-word;
  white-space: normal;
  vertical-align: top; /* 对齐顶部，避免高度不一致时方块错位 */
}

关键细节 #

• 父容器设font-size: 0是为了消除inline-block元素之间的默认空格，不然会额外占宽度导致换行
• 用calc精确计算宽度，确保每行刚好放下3个方块
• vertical-align: top解决不同高度方块的对齐问题，避免有的方块偏上有的偏下

文本适配小技巧 #

如果两个主机名需要更清晰的排版，可以在它们之间插入<br>标签，或者用CSS调整行高提升可读性：

.col-md-4 .row div {
  line-height: 1.5; /* 增加行高，让两行文本更舒展 */
}

内容的提问来源于stack exchange，提问作者Stuttgarter Hofbrau