固定寬度的右欄和可調整大小的內容

Question

我試圖讓兩個div旁邊的海誓山盟。正確的寬度是固定的，但左邊的必須能夠調整大小。我試過多種方法，但沒有適合我的所有要求：

1. 右一個有固定寬度
2. 父div有孩子最大的高度（包其孩子的）
3. 左一個必須調整
4. 的Html結構必須以該順序（理由底部）：

HTML：

<div class="container"> 
    <div class="variable_width"></div> 
    <div class="fixed_width"></div> 
</div> 

我試圖絕對定位正確的股利和增加左邊一個保證金，並全部達到要求，除了父DIV不換行最大的孩子（預期） http://jsfiddle.net/0fxL71xL/3/

.container{max-width:400px;position:relative;} 
.variable_width{margin-right:100px;} 
.fixed_width{width:100px; position:absolute;right:0;top:0;} 

我也嘗試使用內嵌塊和最大寬度，但然後divs不在頂部對齊，我不知道如何處理空白問題。最重要的是，它不會使左格調整：http://jsfiddle.net/0fxL71xL/4/

.container{max-width:400px;} 

.variable_width{max-width:290px; display:inline-block;} 
.fixed_width{width:100px; display:inline-block;} 

我也試過右邊右邊的div一個浮動，但它並沒有走近我想要的東西。 我得到的最接近的是在html中更改順序並使用float：在div上必須向右移動，但在這種情況下，我無法使用@media查詢在某個時刻顯示在左側div下方。

編輯：雖然paulie_d的答案修復它，我寧願東西，有一個大的瀏覽器支持

Answer 1

經過更多的搜索後，我遇到了這個有趣的頁面，總結了一些技術來實現我想要的。它給出了最完整的答案。

http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/

Answer 2

flexbox可以做到這一點。

JSfiddle Demo

.container { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.fixed_width { 
 
    width: 200px; 
 
    background: #bada55; 
 
} 
 
.variable_width { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    background: plum; 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="variable_width"></div> 
 
    <div class="fixed_width"></div> 
 
</div>

Answer 3

.container { 
width:100%; 
} 

.variable_width { 
    max-width: 70%; 
    display: inline-block; 
    background-color:blue; 
margin-right: -3px; 
} 
.fixed_width { 
width:100px; 
width: 28%; 
display: inline-block; 
    background-color:red; 
vertical-align: top; 
} 

現在你可以使用這個代碼。我認爲它會工作fine.you可以添加一些內容在寬度可變的div類，並檢查它是否工作或不。我已檢查它，它真的工作:)。 http://jsfiddle.net/souraj/vaqbsdzk/