自动折叠空白

Question

我有一个非常简单的例子，我在JSBin上写过。它看起来像这样：

我想做的只是取两个给定宽度和高度的div并且并排显示它们之间没有间隙。我使用display: inline-block来完成上述操作，但似乎它拒绝扼杀div之间的空白，这似乎完全违反了内容和样式分离的想法。

这是我的HTML：

<div class="container">
  <div class="a">
    <!-- completely empty -->
  </div>

  <div class="b">
    <!-- nothing at all -->
  </div>
</div>

这是我的CSS：

.container {
  display: inline-block;
}

.a {
  width: 320px;
  height: 240px;

  display: inline-block;

  background-color: #83C5D1;
}

.b {
  width: 180px;
  height: 240px;

  display: inline-block;

  background-color: #B2D9D6;
}

如何在不触及我的HTML的情况下让它们紧密相连？

Answer 1

将float:left添加到两个div类.a和.b

我提升了你的JSBin http://jsbin.com/iwihox/4/edit

Answer 2

您正在使用表格设计。 Go for broke!

.container {
  display: table-row;
}

.container > * {
  display: table-cell;
}

修改：Firefox不喜欢inline-block children。

Answer 3

QUICK FIX

所有给出的答案都是很好的解决方案，但差距的主要原因是实际HTML中有空白字符会被渲染。如果删除两个div之间的空格：

 ..</div><div>..

这将解决您当前的问题。 继承人JSBIN：http://jsbin.com/iwihox/10/edit

正确的解决方案：

执行此操作的正确方法是将float:left添加到类.a和.b。使它们浮动会改变框模型，因此根据您的周围标记，您需要将clear:both添加到HTML中的下一个标记，以使文档正常流动。

检查这个问题：http://jsbin.com/iwihox/19/edit

让我知道，谢谢！