javascript - 添加内容并在主体上 float 外屏

Question

如果内容超出 100% 宽度，是否可以水平滚动？

例如:我有一个空白页面，它使用ajax不断向容器添加div。

父 div 的 CSS:

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

使用ajax添加的子div:

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

如果我添加更多 div，它会破坏线条，但我希望滚动条水平滚动。

Answer 1

问题是 white-space:nowrap 对布局的 float 元素没有任何影响。您可以将子 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>