div alignment - %width

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);