在調整窗口大小時，無法停止div的下降

我已經嘗試將此自己修復一段時間，這似乎是一個簡單的問題，但我迷路了。在調整窗口大小時，無法停止div的下降

我有兩個div，一個浮動左邊，一個浮動右邊。右邊的邊距爲40px，寬度需要隨着窗口變小而調整。此刻，一旦兩個div觸碰它就會下降。

請檢查這對進一步瞭解:) https://jsfiddle.net/to7g54sn/1/

#contentwrapper { 
width: 100%; 
max-width: 1160px; 
float: right; 
margin-top: 154px; 
margin-left: 40px; 
} 

#navigation { 
width: 150px; 
margin-left: -120px; 
float: left; 
}

（預覽需要的1330px的寬度，看的div累倒之前）。

右側div上的margin-left：40px需要不斷應用，如果向下滾動調整大小的窗口，您將看到左側div重疊。我認爲JavaScript使這個問題變得困難，但我不完全確定。

來源

2016-02-14 ccc

我認爲你正在尋找的是一個2-COL佈局，其中一列固定寬度，另一個是流動的，對不對？如果是這樣，請使用負邊距檢查此簡單演示http://codepen.io/tedw/pen/azqMRL?editors=1100您也可以使用'display：table-cell;'或'display：flex;'來執行此操作。 –

使用可靠div寬http://stackoverflow.com/questions/21136975/fixed-menu-on-left-and-content-scrollable – Keloo

@TedWhitehead ...感謝您的幫助。我試着將你寫在我的jsfiddle中的東西合併，但我無法實現我想要的東西。這可能是因爲我的JavaScript可能？或者可能是因爲我很難理解你的意思。任何機會，你可以快速看看我的jsfiddle？或者參考我進一步解釋你的解決方案的一些信息。 :) – ccc

我有一個簡單的解決方案。只要使用低於這個CSS：

#contentwrapper { 
    width: calc(100% - 70px); 
}

入住這對jsfiddle

來源

2016-02-15 20:53:09

非常感謝你。你能解釋一下這是如何工作的嗎？ – ccc

這就像動態的CSS。它將獲得它的父寬度爲70px。 –

聽起來很簡單。好的，謝謝你的幫助。 – ccc

在調整窗口大小時，無法停止div的下降

回答

相關問題