只能使用css滾動的可調整大小的列

我想創建一個具有不應該被包裹的預格式化文本的列的靈活佈局。我的問題是，只有當我將可滾動容器的寬度設置爲一個具體的寬度值時，纔會出現列中的滾動條，％似乎不起作用。如果我這樣做，圍繞它的列將仍然使用瀏覽器窗口正確調整大小，但容器的寬度不會相應更改，因爲它是固定的。只能使用css滾動的可調整大小的列

這個優秀的教程幫助我創建了很多列：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks，但它建立在可調整大小的內容上。

有沒有什麼辦法可以調整滾動容器與純CSS的列一起？

Resizable columns with scroll bar

來源

2013-03-10 allprog

我想你大概可以設置您的溢出滾動，這將解決這個問題

來源

2013-03-10 07:07:44

設置overflow: scroll到左的容器中，然後在設置寬度內p或其他元素

#container1{ 
    overflow: scroll; 
} 
#container1 #coll p{ 
    width: 700px; 
}

來源

2013-03-10 07:25:44 Alireza41

謝謝，但我無法設置內容的寬度。這些邊界框由預格式確定。 – allprog 2013-03-10 07:34:00

我已經使用overflow:auto，但我的花車總是花費盡可能多的空間作爲他們的內容。這導致列超出屏幕尺寸。

我找到了答案在這太問題： force a div to contain floated child divs

我基本上讓我的容器包含浮動元素，並防止它倒塌。 http://jsfiddle.net/zfsjb/1/

<style> 
    #main { 
    clear: both; /* Contain floating elements */ 
    background-color: red; 
    } 

    #main:after { /* Prevents the collapsing of the containing element. */ 
    content: "."; 
    clear: both; /* */ 
    display: block; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
    } 

    #primary { 
    float: left; 
    margin: 0; 
    width: 20%; 
    background-color: yellow; 
    } 
    #secondary { 
    float: left; 
    width: 80%; 
    background-color: blue; 
    } 
</style> 
<div id="main"> 
    <div id="primary">Primary</div> 
    <div id="secondary">Secondary</div> 
</div>

來源

2013-03-10 10:28:30 allprog

只能使用css滾動的可調整大小的列

回答

相關問題