使用Floats实现自定义网格：为何Div无法并排显示？

你的div无法通过float并排，核心是CSS里存在两处语法错误，导致宽度计算和边距设置失效：

1. calc运算的语法错误
   CSS的calc()函数要求减法运算符-的两侧必须有空格，否则浏览器无法正确解析计算式。你写的calc((100%-50px)/2)会被判定为无效表达式，元素宽度会被浏览器默认处理，最终总宽度超出父容器。

2. :not选择器的语法错误
   :not(last-child)是错误写法，正确的伪类选择器格式为:not(:last-child)，缺少内层冒号会让这条边距样式完全不生效，导致两个col的总宽度超过父容器，无法并排。

修正后的CSS代码 #

.row {
  max-width: 1440px;
  margin: 0 auto;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.col-1-2 {
  background-color: red;
  width: calc((100% - 50px)/2); /* 修正：-两侧添加空格 */
  float: left;
}

.col-1-2:not(:last-child) { /* 修正：补全:not()内的伪类语法 */
  margin-right: 50px;
}

修正后，两个col的宽度会被正确计算为(父容器宽度 - 50px边距)/2，加上第一个col的margin-right，总宽度刚好等于父容器宽度，即可实现并排显示。

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