旁边下面是我需要的插图。DIV垂直居中，相对于窗口。水平滚动。在固定格

enter image description here

在左边固定股利和右侧的水平滚动的div是一样的东西12000px。当重新调整大小时，我需要正确的div在窗口中垂直居中。我无法得到我使用的常用标签（position：relative和margin：auto）来处理此问题。我认为这是因为div在屏幕两侧溢出？

来源

2012-03-08 user1257497

我不是在布局页都不错，但这个CSS是你想要的左侧，水平滚动，div，

.horizontal_scroll{ 
    float:left; 
    overflow:auto; 
    white-space: nowrap; 
    width : 500px; 
    height : 500px; 
}

并应用于div，

<div class="horizontal_scroll"> ... </div>

来源

2012-03-08 20:50:52 nlucaroni

这个界面应该完成你的模型显示。谢谢。

http://jsfiddle.net/9tV4y/2/

来源

2012-03-08 20:51:31 Clint

非常欢迎。这是为你工作吗？需要任何调整？ – Clint 2012-03-08 22:52:37

@ user1257497 - 请标记接受的答案。 – jaredhoyt 2012-05-04 17:02:56

二者的宽度和高度是基于百分比（尽管你可以更改为您想任何其他类型的长度）。如果更改左列的width，请确保将右列的left更改为相同。垂直定位通过top:0;bottom:0;margin:auto 0;height:70%;完成。定位，顶部/底部边距和高度必须全部设置为使其工作。

这是jsFiddle Demo。

HTML

<div id="lc"></div> 
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>

CSS

<style> 
html, body {height:100%;} 
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;} 
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;} 
</style>

注：务必从html所有元素的height设置为#lc/#rc的父节点100%。

来源

2012-03-08 21:05:33 0b10011

DIV垂直居中，相对于窗口。水平滚动。在固定格

回答

HTML

CSS

相关问题