html - div 对齐方式 - % 宽度

Question

我在另一个里面有 2 个 div，这是代码:

HTML:

<div id="header">  
  <div id="leftHeader"></div>
  <div id="rightHeader"></div>
</div>

CSS:

#leftHeader {
  width:40%;
  float:left;
  height:120px;
  margin: 0 0 0 1px;
}

#rightHeader {
  width:60%;
  float:left;
  height:120px;
  margin: 0 1px 0 0;
}

我不明白为什么第二个 div 出现在第一个 div 的底部，我希望它们水平对齐。
谢谢

Answer 1

问题是您在第一个 div (1px) 左侧和第二个 div (1px) 右侧设置的边距。
所以 40% + 1px + 60% + 1px = 100% + 2px，这就是你看到它们没有对齐的原因。 您应该删除边距或使用 calc 函数:

width: calc(60% - 1px); and width: calc(40% - 1px);