添加内容并在 body 上浮动外屏

Question

如果内容超出 100% 宽度，是否有水平滚动的方法？

例如：我有一个空白页面，它连续添加 divs 到容器 ajax。

CSS 为 parent div:

position:absolute;
top: 50px;
left:240px;
height: calc(100% - 50px);
width:calc(100% - 240px);
background: #F1F1F8;
white-space: nowrap;
overflow: auto;

加上ajax的childdiv：

position: relative;
height:100%;
top:0px;
bottom:0px;
width:auto;
min-width: 300px;
padding-left:30px;
padding-right:30px;
background-color:#282D32;
float:left;

如果我添加更多 divs 它会中断行，但我希望滚动条水平滚动。

Answer 1

问题是 white-space:nowrap 对布局的浮动元素没有影响。您可以将子 div 设置为 display:inline-block。

如果只需要水平滚动条，可以overflow-x:auto + overflow-y:hidden.

.parent {
  font-size: 0; /*remove whitespace*/
  position: absolute;
  top: 50px;
  left: 240px;
  height: calc(100% - 50px);
  width: calc(100% - 240px);
  background: #F1F1F8;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.child {
  font-size: 16px;
  position: relative;
  height: 100%;
  top: 0px;
  bottom: 0px;
  width: auto;
  min-width: 300px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: #282D32;
  display: inline-block;
}
.child:nth-child(even) {
  background-color: #464E55;
}

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

Answer 2

尝试将所有元素包装在另一个具有无限宽度（999999 像素或每次添加新元素时扩展它）的 div 中。这样，父级 div 具有固定宽度（从我在您的 css 中看到的 100% - 240px）并且它具有溢出：自动（或者您可以放置溢出：滚动），以及这个新的包装器所有项目都将比父项目宽，因此实际上会有内容要滚动。你这样做的方式是你的第 5 个项目到达父级 div 的边缘，并且它只能在新行中到达其他任何地方。

添加内容并在 body 上浮动外屏

Adding content and float outer screen on body

javascript

css

ajax

css-float