Question

我在博客中使用了两个div标签来包装编程代码。第一个用于设置具有固定宽度的大纲框，其中包含以下CSS类：

.outlinebox {
  width: 435px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  padding: 5px
}

第二个div用作内部框，用于设置带有类的代码的nowrap：

.nowrappercodesinner {
 width: auto;
 padding: 5px; 
 overflow: auto;
 white-space:nowrap;
}

我在我的博客中为我的代码使用了这些div标签。它们工作正常，直到我尝试添加第三个div作为具有特定背景颜色的内部区域。例如：

<div class="outlinebox">
  <div class="nowrappercodesinner">
     <div class style=""background-color:#cccccc;">
         ...
     </div>
  </div>

问题是当我将水平滚动条向右移动时，背景颜色不会向右延伸。我不确定无论滚动条移动到哪里，内部背景颜色是否会被填充。

我在最近的博客中有一个例子：Zip Files with PowerShell Script。您可以在第三个代码块中看到问题。

Answer 1

溢出：自动;

最里面的div中的

可能有所帮助。当我在Firebug中添加属性时，至少它具有所需的效果。我觉得很奇怪，因为我认为auto应该是默认设置。

编辑：overflow的默认值似乎是visible。

Answer 2

也许我错过了什么，但为什么你需要第三个div？难道你不能把背景颜色放在第二个div上吗？我在webkit的检查器的博客上尝试了这个，它显示得很好。

<div class="outlinebox">
  <div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>

使用自动滚动设置div的背景颜色

2 个答案: