Question

我有两个固定内容的内嵌块，我试图将它们彼此相邻显示。

它们都被保存在width: 1000px;的div中，两个内联块div分别是width: 400px;和width: 600px;。

然而，两个div不显示内联，第二个div在第一个div下面折叠，如果我将第二个div的宽度放到width: 550px;它们都显示为内联，我的问题是：

为什么宽度为1000px的两个分区不能同时放在宽度为1000px;的容器内？

以下小提琴。

<div class="layout">
  <div class="width">
    <div class="area left">

    </div>
    <div class="area right">

    </div>
  </div>
</div>

和CSS

.layout {
  box-sizing: border-box;
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 50px;
}

.layout .area.left, .layout .area.right {
  display: inline-block;
  height: 250px;
}

.layout .area.left {
  width: 400px;
  background: green;
}

.layout .area.right {
  width: 600px;
  background: blue;
}

.width {
  width: 1000px;
  margin: 0 auto;
}

https://jsfiddle.net/4asw47yg/

Answer 1

这是因为浏览器会考虑两个.area <div>元素之间的空间。如果您只是删除空格（并使没有其他更改），它将起作用 - 如下所示：

<div class="layout"> <div class="width"> <div class="area left"> </div><div class="area right"> </div> </div> </div>

Here's an updated fiddle显示结果。

要明确：您认为这是display: inline-block的原因。比较，您会注意到with it (gap)和without it (no gap)之间的垂直空格差异。我打算尝试进一步解释，但它看起来像there's an excellent write-up already here。

固定宽度内容中的内联块溢出

1 个答案: