CSS布局问题：两个左浮动Div与一个右浮动Div无法对齐

咱们先拆解下你遇到的核心问题：

1. 宽度溢出导致换行：你给.numb1和.numb2都设置了width: 60%且左浮动，两个元素宽度加起来达到120%，远超容器的100%宽度，所以.numb2会被挤到下一行。这时候作为右浮动的.numb3只能和当前行的最后一个元素（换行后的.numb2）对齐，自然没法和.numb1在同一行。
2. 多余的display: inline-block：给浮动元素设置这个属性完全没用——当元素被设置为float后，浏览器会自动把它的display计算为block，这个声明不会产生任何效果。

修正后的解决方案 #

要实现.numb3和.numb1对齐的效果，只需调整浮动规则和宽度：

/* 让.numb1左浮，占据60%宽度 */
.numb1 {
  float: left;
  width: 60%;
  box-sizing: border-box; /* 可选：让padding/border包含在宽度内，避免溢出 */
}

/* .numb2取消浮动，自动在.numb1下方排列 */
.numb2 {
  width: 60%; /* 和.numb1同宽，也可以设为100%占据整行 */
  box-sizing: border-box;
}

/* 让.numb3右浮，占据35%宽度 */
.numb3 {
  float: right;
  width: 35%;
  box-sizing: border-box;
}

/* 可选：给父容器添加清除浮动，防止高度塌陷 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

为什么这样改？ #

• 只让.numb1和.numb3浮动，两者宽度总和（60%+35%=95%）小于100%，能在同一行左右排列，完美实现.numb3和.numb1对齐的需求。
• .numb2取消浮动后，会自动换行到.numb1的下方，符合常规布局逻辑。
• box-sizing: border-box是实用技巧，能避免元素的内边距、边框额外增加宽度导致布局溢出。

内容的提问来源于stack exchange，提问作者J. Doe