Question

我想创建具有溢出效果的div。这是我的代码

<div style="width:100%;clear:both;overflow-x:auto">
   <div style="width:50%; float:left; background:#ccc;height:200px"></div>
   <div style="width:50%; float:left; background:#333;height:200px"></div>
   <div style="width:50%; float:left; background:#cc90fc;height:200px"></div>
   <div style="width:50%; float:left; background:#000;height:200px"></div>
</div>

我希望这些div在溢出时不会低于下方，容器div会有一个滚动条，任何建议。

Answer 1

您需要将whitespace:nowrap提供给父容器，将display:inline-block提供给子元素

当给出空白：nowrap 时，里面的内容不会转到下一行。

＆＃13;

<div style="width:100%;overflow-x:auto;white-space: nowrap; font-size:0">
  <div style="width:50%; display:inline-block;  background:#ccc;height:200px; font-size:initial"></div>
  <div style="width:50%; display:inline-block;  background:#333;height:200px; font-size:initial"></div>
  <div style="width:50%; display:inline-block;  background:#cc90fc;height:200px; font-size:initial"></div>
  <div style="width:50%; display:inline-block;  background:#000;height:200px; font-size:initial"></div>
</div>

＆＃13;

Answer 2

为了避免display:inline-block元素之间的差距，您应该在容器元素中使用font-size:0;。还要添加vertical-align以将子元素保持在同一行中。见下文：

<div style="width:100%;overflow-x:auto; white-space: nowrap; font-size: 0;">
  <div style="width:50%; display:inline-block; background:#ccc; height:200px; font-size: 12px; vertical-align: top;">afadsf afdafdsaf</div>
  <div style="width:50%; display:inline-block; background:#333; height:200px; font-size: 12px;  vertical-align: top;"></div>
  <div style="width:50%; display:inline-block; background:#cc90fc; height:200px; font-size: 12px;  vertical-align: top;"></div>
  <div style="width:50%; display:inline-block; background:#000; height:200px; font-size: 12px; vertical-align: top;"></div>
</div>

Answer 3

我不是100％肯定你在问什么，但是如果你不希望div在垂直（上下）而不是水平（从左到右）溢出时显示你应该使用溢出-y样式而不是overflow-x样式。

在您的样式属性中将style="width:100%;clear:both;overflow-x:auto更改为style="width:100%;clear:both;overflow-y:auto。

div溢出x滚动不工作

3 个答案: