html - 强制内容水平流动

Question

我希望强制动态垂直居中的框的内容水平流动，而不是通常需要向上或向下滚动的垂直流动。

#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>

问题是当我调整浏览器窗口大小时，内容没有向右流动并具有水平滚动条，而是向下移动到中心框之外。关于我做错了什么和解决方案的建议？

Answer 1

下面是创建一个水平滚动区域的例子，里面有元素:

http://jsfiddle.net/6PupD/

诀窍是可滚动容器的宽度小于对象容器。您需要将对象容器的宽度设置得足够大以容纳所有元素。

希望这对您有所帮助。

鲍勃