html - 向 float 元素添加边框会导致最后一个 div 换行

Question

我有以下 html/css。当我关闭边框时，一切都正确排列，但如果我将边框放在中心 div 上，则右侧的内容会显示在其他所有内容下方。我该如何解决这个问题？

#container {} #left {
  width: 20%;
  float: left;
}
#center {
  width: 60%;
  float: left;
  border-left: 1px solid black; /*this causes the 'right' div to wrap*/
  border-right: 1px solid black; /*this causes the 'right' div to wrap*/
}
#right {
  float: left;
  width: 20%;
}

<div id="container">
  <div id="left">I am left</div>
  <div id="center">I am center</div>
  <div id="right">I am right</div>
  <div style="clear: both;"></div>
</div>

Answer 1

您需要添加 box-sizing: border-box 以便边框的宽度包含在元素的宽度中，否则它的 60% + 1px + 1px + 2 * 20% 并且大于 100%。

#container > * {
  box-sizing: border-box;
}
#left {
  width: 20%;
  float: left;
}
#center {
  width: 60%;
  float: left;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
#right {
  float: left;
  width: 20%;

<div id="container">
  <div id="left">I am left</div>
  <div id="center">I am center</div>
  <div id="right">I am right</div>
  <div style="clear: both;"></div>
</div>

注意:box-sizing: border-box 还将包括 padding 但不包括边距。