Html Can'；t将一列的DIV与另一列的DIV对齐

我想买一个左边有一些DIV的column，右边有一个大DIV。我已经开始在小提琴上尝试它，当我将border属性指定给div时，我的第一个问题出现了

HTML:

无论如何，我期待这个目标（所以我的方法可能不是正确的…）

---

有什么想法吗？

您的边框宽度正在扩展元素宽度。只需添加到元素中，即可将边框包含到给定的宽度中。那么，浮动应该是预期的

您可以阅读更多关于的内容（感谢comments@tabs1200中的提示）

以下是一个工作示例：

#容器{
保证金：0；
背景颜色：黄色；
高度：500px；
宽度：100%；
}
#iframe{
宽度：85%；
身高：100%；
浮动：对；
边框：1px纯红；
框大小：边框框；
}
#表1{
宽度：15%；
身高：15%；
浮动：左；
边框：1px纯绿色；
框大小：边框框；
}

---

您的边框宽度正在扩展元素宽度。只需添加到元素中，即可将边框包含到给定的宽度中。那么，浮动应该是预期的

您可以阅读更多关于的内容（感谢comments@tabs1200中的提示）

以下是一个工作示例：

#容器{
保证金：0；
背景颜色：黄色；
高度：500px；
宽度：100%；
}
#iframe{
宽度：85%；
身高：100%；
浮动：对；
边框：1px纯红；
框大小：边框框；
}
#表1{
宽度：15%；
身高：15%；
浮动：左；
边框：1px纯绿色；
框大小：边框框；
}

---

使用盒子大小。此代码应适用于：

* {
  box-sizing: border-box;
}

---

使用盒子大小。此代码应适用于：

* {
  box-sizing: border-box;
}

---

是的-要了解此解决方案的工作原理，请阅读。这对于任何web开发人员来说都是非常重要的理解。是的，要理解这个解决方案的工作原理，请阅读。这对于任何web开发人员来说都是非常重要的理解。

#iframe{
  ...
  box-sizing: border-box;
}

#tab1 {
  ...
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}