css - 可以溢出 : hidden; work with inline-blocks?

Question

我试图将两个宽度为 50% 的 div 并排放置，它们是内联 block 。

问题是，我还想添加其他影响宽度的元素，例如边距、填充、边框等。我很乐意将一些像素隐藏在窗口的一侧。 (事实上​​，我更喜欢它)

究竟是什么把戏？ 当两个内联 div 达到其父级的最大宽度时，我如何才能让它们不堆叠在一起。内联 block 是否有一些默认定位？

编辑:这是一个代码示例。这对我来说似乎很简单，但他们就是不排队。

.parent {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
}
.child {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 50%;
  height: 100%;
  margin: 1px;
}

<div class="parent">
  <div class="child">content</div>
  <div class="child">content</div>
</div>

Answer 1

它们不会堆叠的原因是因为您已将边距设置为 1px，然后将宽度设置为可用宽度的 50%。所以实际上每个 child 的宽度都是 50% + 1px + 1px(左边和右边)，这将超过 100% 的可用宽度 4px.

尝试使用内边距或边距，或者减小父级的宽度。你也可以这样做:

width: calc(50% - 2px);

此外，inline-block 的性质使得如果元素加起来恰好(或接近)100%，则很难将元素彼此对齐。

您可以通过将父项的字体大小设置为 0 并将子项设置为大于 0 的任何字体大小来解决此问题。或者，您可以将每个子项设置为 float: left

Demo 1 (使用花车)

Demo 2 (使用 float 和 calc())

Demo 3 (将字体大小设置为 0)