0

我有一个非常简单的例子，我写在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 的情况下紧密结合在一起？

4

3 回答 3

0

您正在使用表格设计。 孤注一掷！

.container {
  display: table-row;
}

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

编辑： Firefox 不喜欢inline-block children。

于 2013-08-15T22:19:49.897 回答
0

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

我更新了你的 JSBin http://jsbin.com/iwihox/4/edit

于 2013-08-15T22:14:47.577 回答
0

快速解决

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

 ..</div><div>..

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

正确的解决方案：

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

检查这个小提琴： http ://jsbin.com/iwihox/19/edit

让我知道，谢谢！

于 2013-08-15T23:12:35.007 回答