CSS固定寬度右，流體左，右div首先在html中。如何保持摺疊狀態

我有一個流體寬度左側div和固定寬度右側div。花了一段時間才弄清楚如何使這項工作，因爲我正在主持一個jrox網站和jrox不會讓我改變列生成的順序。的HTML：CSS固定寬度右，流體左，右div首先在html中。如何保持摺疊狀態

<div id="jroxHeader" class="jroxHeader"> </div> 
<div id="jroxContent"> 
    <div id="jroxRightColumn" class="jroxRightColumn"> Places to go: 
     <ul> 
     <li>First Menu</li> 
     <li>Second Menu</li> 
     <li>Third Menu</li> 
     </ul> 
    </div> 
    <div id="jroxMainContent" class="jroxSingleColumn"> 
     Very little content. 
    </div> 
</div>

的CSS：

.jroxSingleColumn{ 
    float: left; 
    margin-right: 160px; 
    padding:0 10px; 
    background-color:#B6B6B4; 
} 
.jroxRightColumn{ 
    float: right; 
    width: 160px; 
    margin-left: -160px; 
    background-color:#8E8E8C; 
} 
.jroxHeader{ 
    width: 100%; 
    background-color:#7A7A78; 
    height:150px; 
}

正如你可以看到this fiddle這個看上去很不錯。它幾乎完美地工作。我沒有注意到問題，直到我遇到一個非常少的jroxSingleColumn內容的頁面，如this fiddle。我需要jroxSingleColumn來填充div的其餘部分，我需要它是跨瀏覽器兼容的。我可以更改一些HTML，但右邊的列將始終以HTML格式顯示。

我幾乎肯定這不是重複。我已經閱讀了許多很多類似的問題，但沒有一個是相同的。

謝謝。

來源

2013-07-25 Dustin Griffith

刪除float:left從jroxSingleColumn類即

改變你的CSS這樣的：

.jroxSingleColumn{ 
    margin-right: 160px; 
    padding:0 10px; 
    background-color:#B6B6B4; 
}

看到這個fiddle

雖然我想建議，有實現的更清潔的方式你的最終結果。

來源

2013-07-25 21:27:56

我在這個問題上犯了一個錯誤。你的回答對於這個問題是絕對正確的。真正的問題應該是使用[this]（http://jsfiddle.net/ZVP6A/24/）小提琴，但是在創建小提琴時，我重寫了較短版本的頁面，並按錯誤順序重寫了它。我應該如何得到一個答案，而沒有任何迴應這個問題呢？我應該：重新問這個問題嗎？編輯這個問題？放棄S/O並自己弄清楚？ –

哈哈，不是一個問題隊友，你總是可以回答你的疑惑。爲了更好的迴應，你可以把它帶入一個新的問題，只有規則是，你應該付出努力吧:)。現在，請參閱，因爲您無法更改標記，所以沒有太多可以完成的工作，我建議您去尋找簡單的jQuery代碼，以處理左側div的大小調整。看到這[小提琴]（http://jsfiddle.net/ZVP6A/29/）。爲什麼使用腳本？你的標記不完全是流動的，因此我們幾乎沒有其他選擇:) –

我喜歡jQuery修復，但我已經轉發了正確的措辭[這裏]的問題（http://stackoverflow.com/questions/） 17932960），我想我找到了一個很好的解決方案。謝謝。 –

CSS固定寬度右，流體左，右div首先在html中。如何保持摺疊狀態

回答

相關問題