2010-12-11 57 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