div宽度百分比失效：无法实现两个div并排显示

嘿，我一眼就发现几个可能导致你问题的点，咱们逐个解决：

1. 最关键的拼写错误 #

你CSS里的类名写错了！.intro-containter-img应该是.intro-container-img（注意是container，你少写了一个n）——这个错误会让这个图片div完全没应用到你设置的width:50%和float:left样式，这肯定没法并排呀！

2. 避免宽度溢出的小技巧 #

即使修正了拼写，默认的box-sizing: content-box可能会让你的div总宽度超过容器：因为这个模式下，width只算内容区，padding和border会额外占空间，两个50%的div加起来可能就超100%了。

建议给所有元素加上box-sizing: border-box，让padding和border都包含在设定的width里：

修正后的完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型，避免宽度溢出 */
}

.intro-container {
  width: 100%;
  min-height: 400px;
  background-color: #fdee58;
}

.intro-container-text {
  width: 50%;
  background-color: #ff0000;
  float: left;
}

.intro-container-img { /* 修正了类名拼写 */
  width: 50%;
  background-color: #00ff00; /* 加个颜色方便直观查看效果 */
  float: left;
}

额外优化建议 #

• 如果你的子div里有图片内容，记得给图片加max-width:100%; height:auto;，避免图片撑破div宽度
• 为了防止容器高度塌陷（浮动元素脱离文档流导致容器高度为0），可以给.intro-container添加清除浮动的样式：

.intro-container::after {
  content: "";
  display: table;
  clear: both;
}

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