无法将一列与DIV与另一个DIV对齐

Question

我正试图在左边有一些DIV，在右边有一个大DIV。我开始在小提琴上尝试它，当我将border属性分配给我的DIV时，我的第一个问题出现了。

HTML：

<div id="container">
  <div id="iframe"></div>
  <div id="tab1"></div>
</div>

CSS：

#container {
 margin:0;
 background-color:yellow;
 height: 500px;
 width:100%;
}
#iframe{
 width: 85%;
 height: 100%;
 float: right;
 border: 1px solid red;
}
#tab1 {
 width: 15%;
 height: 15%;
 float:left;
 border: 1px solid green;  
}

View on Fiddle

无论如何，我期待着这个目标（所以也许我的方法不正确......）

有什么想法吗？

Answer 1

您的边框宽度正在扩展您的元素宽度。只需在元素中添加box-sizing: border-box;即可将边框包含在指定的宽度中。然后浮动应该是预期的。

您可以阅读有关CSS box model on MDN的更多信息（感谢评论@ tabs1200中的提示）。

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

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

这是一个有效的例子：

＆＃13;

＆＃13;

#container {
  margin: 0;
  background-color: yellow;
  height: 500px;
  width: 100%;
}
#iframe {
  width: 85%;
  height: 100%;
  float: right;
  border: 1px solid red;
  box-sizing: border-box;
}
#tab1 {
  width: 15%;
  height: 15%;
  float: left;
  border: 1px solid green;
  box-sizing: border-box;
}

＆＃13;

<div id="container">
  <div id="iframe"></div>
  <div id="tab1"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用box-sizing。这段代码应该有效：

* {
  box-sizing: border-box;
}