旁邊下面是我需要的插圖。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

相關問題