另外兩列div查詢

-1

我想要的是一個雙列CSS佈局，帶一個固定的側欄（在右邊），假設寬度爲300px，並且對於一個可以擴展以適合屏幕的流動左側列大小和高度，然後如果內容需要，則在左側欄中提供垂直滾動條。另外兩列div查詢

如果有人能幫助，我會永遠感激。

這裏是我迄今爲止...

<html> 
<head> 
<style type="text/css"> 
body {margin:0px;} 
#outer { 
    overflow: hidden; 
    width: 100%; 
    height:608px; 
    background: #ddd; 
} 

#inner1 { 
    float: right;/* Make this div as wide as its contents */ 
    width:300px; 
    padding:10px; 
    background: #fdd; 
} 

#inner2 { 
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */ 
    padding:10px; 
    background: #ddf; 

#divScroll { 
    overflow: scroll; 
    height:600px; 
} 
</style> 
</head> 
<body> 

<div id="outer"> 
<div id="inner1"> 
    inner div 1. Some text... 
</div> 
<div id="inner2"> 
<div id="divScroll"> 

    inner div 2... <br /> 
    inner div 3... <br /> 
    inner div 2... <br /> 

. 
. 
    enough text here to make it scroll ! 
. 
. 
    inner div 2... <br /> 
    inner div 2... <br /> 
    inner div 2... <br /> 
    inner div 2... <br /> 
    </div> 
</div> 
</div> 
</body> 
</html>

來源

2011-12-12 Polecat Harris

發表一些你曾說過的'[垃圾]'代碼，並用它作爲出發點。此外，請花一些時間來查看[faq]。歡迎來到[SO]。 – zzzzBov

請[不要將簽名或標語添加到您的帖子]（http://stackoverflow.com/faq#signatures）。「謝謝，蒂姆。」已經從這個和你以前的問題中刪除。 – meagar

看看是否像http://jsfiddle.net/yp76n/2/是你正在尋找的東西。 – justis

不知道這是你的意思，但我想你想是這樣的：

http://jsfiddle.net/spacebeers/s8uLG/3/

你設置你的容器了溢出設置爲隱藏，然後在每一個DIV添加負邊距底部和相等正邊距底部。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div>

來源

2011-12-13 11:41:20 SpaceBeers

非常感謝！正是我想要的！ –

抱歉，我不能明白這個問題非常好，這是你想要做什麼？： http://jsfiddle.net/6a9bU/2/

來源

2011-12-12 15:38:02

另外兩列div查詢

回答

相關問題