Question

我试图将两个宽度为50％的div放在一起，它们是内联块。

问题是，我还希望添加影响宽度的其他元素，例如边距，填充，边框等。我可以将一些像素隐藏在窗口的侧面。（事实上，我更喜欢它）

究竟是什么诀窍？如何让两个内联div在达到其父级的最大宽度时不会叠加在一起。是否存在内联块的默认定位？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

它们不会堆叠的原因是因为您已将边距设置为1px，然后将宽度设置为可用宽度的50%。因此，每个孩子的宽度实际上是50% + 1px + 1px（左和右），宽度超过100% 4px的可用宽度。

尝试使用填充或边距，或减少父项的宽度。你也可以这样做：

width: calc(50% - 2px);

此外，inline-block的性质使得将元素彼此相邻排列变得更加棘手，如果它们加起来恰好（或接近）100％。

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

Demo 1（使用花车）

Demo 2（使用浮点数和calc（））

Demo 3（将font-size设置为0）

Answer 2

对于填充和边框，您可以在子元素上使用box-sizing: border-box;。

border-box：＆＃34;宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距＆＃34;

来源：box-sizing

我认为你需要从你的孩子身上削减一些空间。例如：width: 49.5%; margin: 1%;

Answer 3

正如迈克建议的那样，尝试使用box-sizing: border-box。只有在指定填充而不是边距时，它才会起作用。

但在这种情况下，即使使用填充和边框，仍然无法将它们并排放置，因为内嵌块元素会在它们之间产生一个小间隙。

您可以找到更多https://css-tricks.com/fighting-the-space-between-inline-block-elements/

如果您可以在窗口侧面隐藏几个像素，则可以将white-space: nowrap;添加到父级。

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

Answer 4

为了记录，这些解决方案似乎是最可靠的：

width: calc(50% - 2px)（使用float: left;）
border-sizing: border-box;（使用border: 1px solid #fff;）
white-space: nowrap;（有条件地工作。）

感谢所有贡献者。这是我一直在寻找的那种清晰度。了解解决此问题的多种方法非常有用。

可以溢出：隐藏;使用内联块？

4 个答案: