2010-12-11 62 views
0

我正在尋找強制垂直動態居中的框的內容而不是通常需要向上或向下滾動的垂直流水平流動。強制內容水平流動

#outerbox { 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 

/* Creating 2% margin on left & right then 3% on top and bottom */ 
#innerbox { 
    height: 94%; 
    margin: 0 2%; 
    margin-top: -47%; 
    position: absolute; 
    top: 50%; 
} 

#content { 
    height: 100%; 
    min-height: 100%; 
} 

<div id="outerbox"> 
    <div id="innerbox"> 
    <div id="content"> 
     Content goes here... 
    </div> 
    </div> 
</div> 

問題是,當我調整瀏覽器窗口,而不是流動的權利,有水平滾動條,內容下移超出中心的框。關於我在做什麼錯誤和解決方案的建議?

回答

1

這裏是元件創建水平滾動區域內的示例:

http://jsfiddle.net/6PupD/

訣竅是可滾動容器的寬度大於所述對象容器小。您需要將對象容器的寬度設置得足夠大以容納所有元素。

希望這會有所幫助。

Bob

+1

這實際上需要我將內容拆分爲標記中的塊。我正在尋找的是隨着內容大小的變化動態地傳輸內容。如果訪問者增加文本大小或更改內容,這將特別有用。我很確定CSS目前無法實現這一點,但希望有人會指出我的一些JavaScript這樣做 – user538825 2010-12-12 00:21:27