如果其他DIV溢出宽度,则DIV中的间隙

时间:2015-10-20 13:00:15

标签: html css width

内容div需要溢出宽度,但顶部div中会出现间隙。

请运行代码段并向右滚动,您会注意到顶部div上的差距



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

<div id="header">
  <p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
&#13;
&#13;
&#13;

如何填写标题div上的空白?

enter image description here

2 个答案:

答案 0 :(得分:1)

我认为这很不可能。你可以使用的是overflow:scroll,它会将滚动条添加到大元素

&#13;
&#13;
#header {
  background: red;
}
#content {
  white-space: nowrap;
  overflow-x:scroll;
}
&#13;
<div id="header">
  <p>HEADER</p>
</div>
<div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
&#13;
&#13;
&#13;

编辑:这是另一个片段应该做的诀窍: display:inline-block将宽度调整为最大的子元素

&#13;
&#13;
#header {
  background: red;
}
#content {
  white-space: nowrap;
}
.container {
    display:inline-block;
}
&#13;
<div class="container">
    <div id="header">
      <p>HEADER</p>
    </div>
    <div id="content">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG CONTENT</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

如果您可以使用您的设计,只需将标题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/

编辑: RE:In your first suggestion, why did you put a fixed width? If I removed the fixed width the gap returns. 这是因为您无法将填充设置为元素的未定义边缘。宽度固定在类似before的状态。溢出的内容调整实际宽度,但需要设置。