使用自動滾動設置div的背景顏色

我在我的博客中使用了兩個div標籤來包裝編程代碼。第一個是用於設定概略框具有固定寬度具有以下CSS類：使用自動滾動設置div的背景顏色

.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。您可以在第三個代碼塊中看到問題。

來源

2009-12-04 David.Chu.ca

隨着湯姆的幫助。我按預期工作。 – 2009-12-04 05:25:37

overflow：auto;

在最裏面的div可能會有所幫助。至少它在Firebug中添加了這個屬性的時候有了預期的效果。我覺得這很奇怪，因爲我認爲auto應該是默認設置。

編輯：默認值overflow似乎是visible。

來源

2009-12-04 05:12:36

是的。第二個div有這個設置。它只適用於那個盒子，而且我必須在內部div中保持一致。大！謝謝湯姆。 – 2009-12-04 05:24:24

不客氣。對加拿大的問候。 – 2009-12-04 05:36:37

也許我錯過了一些東西，但爲什麼你需要第三個div？難道你只是把背景顏色放在第二個div上？我在webkit的檢查員的博客上試過這個，它顯示得很好。

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

來源

2009-12-04 05:16:49

我可能會改變一些其他代碼的bg顏色 – 2009-12-04 05:21:56

這可能可以通過使用不同代碼的不同類來實現，我會想象。如果我可以避免的話，我只是恨所有額外的div在我的標記。 – 2009-12-04 05:43:06

我同意。但是，這提供了一個簡單而靈活的選項來設置背景顏色。我使用VIM的語法高亮顏色模板。現在我有大約10個最喜歡的。我將來可能會改變。從這個意義上說，我不需要維護一組類。 – 2009-12-05 04:56:13

使用自動滾動設置div的背景顏色

回答

相關問題