css - DIV 和 CSS 布局不对齐，但为什么呢？

Question

我正在尝试使用 div 和 CSS 布局屏幕。这是一个简单的布局，但我似乎无法让 div 对齐。我想要一个包含两个 div 的包装器 div:一个向左对齐，一个向右对齐。但是，它们最终会叠加在一起。

我知道这个问题很简单。我在这里缺少什么？

如果我将右侧 div 的宽度减小到 60% 它会正确排列，但我不应该能够使用 100% 父 div 的宽度？

#product_wrapper {
  display: inline-block;
  height: 75%;
  width: 75%;
  background-color: white;
  text-align: top;
  margin: 0 auto;
}
#images_wrapper {
  background-color: red;
  display: inline-block;
  height: 100%;
  width: 30%;
  margin: 0;
  padding: 0;
}
#content_wrapper {
  background-color: blue;
  display: inline-block;
  height: 100%;
  width: 70%;
  margin: 0;
  padding: 0;
}

<div id="product_wrapper">
  <div id="images_wrapper">Foo</div>
  <div id="content_wrapper">Bar</div>
</div>

Answer 1

float 左边你的 child 元素:

jsBin demo

#product_wrapper > *{float:left;}

请注意，inline-block 导致内部元素实际上像 inline 元素一样
空格很重要!

---

所以 另一种方法 是修改您的 HTML，删除 NewLine 分隔符:

jsBin demo

<div id="images_wrapper">

     Foo content

</div><div id="content_wrapper">
     ^^-------------------------------------- no space here

     Bar content

</div>

第三种方法(最差)是将父级的font-size 设置为 0(逻辑上会移除子级的空白间隙，因为现在是 ' 0'); >> 然后将子元素的字体大小重置为 px(因为 em 将不起作用，因为父元素有 0)。
但这是一种很好的方式来放松动态和响应字体大小的跟踪，特别是如果您使用 em 和大小继承。