如果其他 DIV 溢出宽度，则 DIV 中的间隙答案

【问题标题】：Gap in DIV if other DIV overflows width如果其他 DIV 溢出宽度，则 DIV 中的间隙
【发布时间】：2015-10-29 20:14:44
【问题描述】：

内容的div需要溢出宽度，然后顶部的div出现间隙。

请运行 sn-p 并向右滚动，您会注意到顶部 div 的间隙

#header {
  background: red;
}
#content {
  white-space: nowrap;
}

<div id="header">
  <p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>

如何填补标题 div 上的空白？

【问题讨论】：

我知道你不欠我对你的反对票的解释，但我想知道你为什么反对我，所以我可以改进我的问题。

标签： html css width

【解决方案1】：

我认为这不太可能。你可以使用overflow:scroll，它会为大元素添加一个滚动条

#header {
  background: red;
}
#content {
  white-space: nowrap;
  overflow-x:scroll;
}

<div id="header">
  <p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>

编辑：这是另一个可以解决问题的片段： display:inline-block 会根据最大的子元素调整宽度

#header {
  background: red;
}
#content {
  white-space: nowrap;
}
.container {
    display:inline-block;
}

<div class="container">
    <div id="header">
      <p>HEADER</p>
    </div>
    <div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
</div>

【讨论】：

谢谢，我考虑过这个解决方案，但由于设计的原因，我需要 div 像原始发布的那样溢出
我添加了另一个可以解决问题的 sn-p！检查编辑的答案:)

【解决方案2】：

如果你可以用你的设计做到这一点，只需将标题 div 放入溢出的 div 并使其自动适应：

HTML：

<div id="content">
    <div id="header">
      <p>HEADER</p>
    </div>
  LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT
</div>

CSS：

#header {
  left:0px;
  right:0px;
  top:0px;
  background: red;
}
#content {
  width:1000px;
  white-space: nowrap;
}

https://jsfiddle.net/p7m8wg48/

或者做一个包装器：

HTML：

<div id="bodyClass">
    <div id="header">
      <p>HEADER</p>
    </div>
    <div id="content">
      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT
    </div>
</div>

CSS：

#bodyClass{
  width:1000px;
}
#header {
  left:0px;
  right:0px;
  top:0px;
  background: red;
}
#content {
  white-space: nowrap;
}

https://jsfiddle.net/dLmt1Ley/

编辑：回复：In your first suggestion, why did you put a fixed width? If I removed the fixed width the gap returns. 那是因为您不能为元素的未定义边缘设置填充。宽度固定在before-like 状态。溢出的内容会调整实际宽度，但需要设置。

【讨论】：

在您的第一个建议中，为什么要设置固定宽度？如果我删除了固定宽度，间隙就会返回。
与第二个建议相同