css動態佈局的兩個容器

enter image description here 我有一個有趣的佈局設計問題，我想知道我是否可以得到一些幫助。css動態佈局的兩個容器

有兩個容器彼此相鄰，大部分右邊的是靜態大小。左邊的應該根據動態加載的內容來增長。這可能會有很多，或者只有一個數據集。現在，正確的容器應該隨着它的增長而一直在左側。

這裏是棘手的部分。左邊的容器不能包裝，並且應該佔用屏幕上剩餘的寬度，此時滾動條出現。此時，正確的容器位於屏幕邊緣旁邊。

我可以讓它工作，左側的容器總是佔用剩餘的屏幕空間，但是這會將右側容器推向右側，即使左側只有一點點數據。

我也可以讓數據增長並讓右邊停留在左邊，但是溢出滾動條從不出現。我正在思考如何解決所有這些要求。

我也可以只設置寬度爲一切，但並沒有真正解決成長過程中屏幕分辨率的要求，並且仍然不能解決只有極少量的數據

編輯：附帶圖像我目前的佈局。這看起來不錯，因爲它是「完整的」，佔用了瀏覽器寬度的100％。我需要的是如果數據列變得非常小而不再滾動，則將正確的部分向左移動。

來源

2013-01-22 Falkos

我認爲你應該提供一些可視化的例子，甚至是你正在使用的東西的一個jsfiddle。你的問題很混亂，也不清楚。 – Axel

寫了一些小提琴來試圖展示我想要完成的作品 http://jsfiddle.net/aCWst/ http://jsfiddle.net/8KLry/ – Falkos

我把你想要完成的東西放在一起。

右側欄固定在寬度和位置。
左列將展開寬度，如果寬度變得太小而無法顯示內部內容，則滾動。

這裏是例子： http://jsfiddle.net/MwdED/

這裏是HTML：

<div class="container"> 
    <div class="col-left"> 
     <div class="col-content"> 
      <div class="wide-content"> 
       THis is some wide content, sitting inside of the left column. 
      </div> 
     </div> 
    </div> 
    <div class="col-right"> 
     <div class="col-content"> 
      This is the right column. It's fixed in width. 
     </div> 
    </div> 
</div>

而CSS

.container { 
    position: relative; 
    min-width: 500px; /*make sure the columns don't collapse on top of each other*/ 
} 

.col-left { 
    padding-right: 200px; /*make room for right column*/ 
} 

.col-left .col-content { 
    min-width: 300px; /* the minimum width, before overflow scrolling occurs */ 
    overflow: auto; 
} 

.col-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 200px; 
} 

.wide-content { 
    background: red; 
    width: 1000px; 
}

來源

2013-01-22 21:12:02 Axel

我在當前版本中有這樣的佈局。無論如何非常接近:)。我的問題是正確的專欄。如果左列中的內容足夠小，以至於不滾動，則右邊應該移到與容器邊緣齊平的位置。您也幾乎總是滾動，我目前的流程允許它不是。+1幫助 – Falkos

「右側應該移動到與容器邊緣齊平」 - 您的意思是如果左側足夠小（不是100％寬度），則右側欄應與左側齊平？此外，滾動取決於左列內部的內容大於左列允許的最大寬度。 – Axel

是非常多。這是一個奇怪的要求。複雜的佈局。我相信它需要某種形式的外部容器，這種外部容器可以隨着內部容器一起縮放......但是找不到合適的組合。如果可能的話。我試過最大寬度爲100％，但水平生長內部容器似乎也增長了外部容器，並且最大寬度沒有被強制執行。 – Falkos

以什麼阿克塞爾提供的，我想肯定是這樣這將工作。其目的是使兩個容器都是流體的，這樣無論哪個容器生長或縮小，另一個容器都會消除這個差異，但是由於某種原因容器相互滲入。

.col-left .col-content { 
    min-width: 20%; /* the minimum width, before overflow scrolling occurs */ 
    max-width: 80%; 
    overflow: scroll; 
} 

.col-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    min-width: 20%; 
    max-width: 80%; 
}

來源

2013-01-23 14:09:40 N1tr0

css動態佈局的兩個容器

回答

相關問題