如何为相连的多列<div>添加间距且防止元素换行？

首先咱们得搞清楚问题根源：你给两个div都设了width: 50%并浮动，要是直接加margin，两个元素的总宽度（50%+50%+间距）会超过父容器的100%，浏览器自然会把第二个元素挤到下一行。下面给你两种实用解决方案，优先推荐第一种，更贴合现代布局规范：

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

Flexbox天生就是为弹性布局设计的，不用再纠结浮动和宽度计算，直接用gap属性就能轻松加间距，完全不会出现换行问题。

修改步骤： #

1. 给两个div的父容器（比如你可以套一个wrapper容器，或者直接给它们的父元素）添加Flex样式：

.wrapper {
  display: flex;
  gap: 20px; /* 这里设置你想要的间距大小 */
}

2. 调整两个子div的宽度，让它们自动平分剩余空间：

.main-content {
  /* 去掉原来的float: left; */
  flex: 1; /* 让两个元素平分父容器宽度，自动适配间距 */
  background: #232323;
  border-radius: 50px;
  padding-top: 0; /* 注意padding不能设负数，这是无效的哦 */
  height: 315px;
}
.related-content {
  /* 去掉原来的float: left; */
  flex: 1;
}

这样设置后，两个div会自动平分父容器宽度，同时保持你设置的gap间距，既不会换行，还解决了浮动可能带来的高度塌陷问题。

方案二：用calc调整宽度（兼容旧浏览器） #

如果你需要兼容不支持Flexbox的旧浏览器，可以用CSS的calc()函数精确计算宽度，让总宽度刚好等于父容器的100%。

修改步骤： #

1. 调整两个div的宽度，减去间距的一半，再给其中一个div加margin-right：

.main-content {
  width: calc(50% - 10px); /* 50%宽度减去间距的一半 */
  float: left;
  background: #232323;
  border-radius: 50px;
  padding-top: 0; /* padding负数无效，改成0或者你需要的正数 */
  height: 315px;
  margin-right: 20px; /* 设置你想要的间距 */
}
.related-content {
  width: calc(50% - 10px); /* 同样减去间距的一半，总宽度刚好100% */
  float: left;
}

2. 别忘了给父容器添加清除浮动的样式，避免高度塌陷：

.wrapper {
  overflow: hidden; /* 简单有效的清除浮动方法 */
}

这样两个元素的总宽度是calc(50% -10px) + calc(50% -10px) +20px = 100%，刚好填满父容器，不会换行，同时保留你想要的间距。

另外提醒一句：你原来写的padding-top: -10px是无效的，padding不能设置负数，要是想调整元素内部的位置，可以用正数padding或者margin来实现~

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