僅當內容延伸時擴展CSS Div

我正在研究一個新的博客網站，它將記錄我的代碼等。我有一個語法高亮，它看起來像下面的圖片...僅當內容延伸時擴展CSS Div

enter image description here

我有這個CSS

.syntaxhighlighter { 
    width: 100% !important; 
    margin: 1em 0 1em 0 !important; 
    position: relative !important; 
    overflow: auto !important; 
    overflow-y: hidden !important; 
    font-size: .9em !important; 
} 

.syntaxhighlighter:hover { 
    width: 135% !important; 
}

正如你可以在圖片中看到，語法highlited的代碼是一定的寬度以適合我的佈局，我正在嘗試使它更寬，當有代碼讓它擴大，然後我的內容div。

這就是我添加.syntaxhighlighter:hover類的原因，當我將sytax highlighter div懸停時，它會擴展到我設置的寬度。現在唯一我希望改變，如果它甚至可能... ...

我想以某種方式只擴展高亮div的寬度，如果它裏面的代碼拉伸超出正常的寬度。

任何人都可以幫助我嗎？

來源

2011-10-18 JasonDavis

你可以嘗試的一件事是設置min-width: 100%;，然後設置display:inline-block;這將意味着寬度取決於內容（具有預格式化內容意味着它不會包裝），但它不會不適當地收縮，因爲的最小寬度。您也可能會發現設置max-width也是可取的。

另外：請小心過度使用!important指令 - 通常，如果您對選擇器有特定的要求，並且有時會影響可訪問性（例如，如果有人需要重寫樣式表來查看網頁），通常不是必需的。

來源

2011-10-18 01:34:00

謝謝，我認爲這是有效的，在我的'.syntaxhighlighter'下設置了'max-width：100％;'和'display：inline-block;'，然後是'.syntaxhighlighter：hover'我設置了'max -width：135％;'所以div的最大寬度爲100％，除了懸停時，最大寬度增加，這樣當某個div低於懸停最大寬度時，它不會發生變化，效果很好，只希望所有瀏覽器將支持它，再次感謝 – JasonDavis

僅當內容延伸時擴展CSS Div

回答

相關問題