展開左div以保留指定寬度的剩余寬度（不交換元素）

Question

在將其標記為重復之前，請聽我講話。 我想要由2個或更多列組成的列布局。 應該將第一個div（左側的元素）擴展為剩余寬度，而右側的列則具有特定的寬度。 盡管沒有一個描述這種情況，但是有大量的StackOverflow問題。

我可以使用表格布局； （ http://jsfiddle.net/j08691/NmrbP/6/ ）

<div class="left"></div>
<div class="right"></div>

這種方法的問題是我無法設置表格的高度（任何table-cell都忽略該高度），並且列布局應該拉伸為適合父級高度的100％。

我可以利用與overflow:hidden結合使用的浮動元素； （ http://jsfiddle.net/SpSjL/ ）

<div class="right"></div>
<div class="left"></div>

這種方法的問題在於已交換了元素（即，在右邊之后定義了左邊的元素）。 這不適用於自適應網站，在該網站中，左側元素應該出現在右側元素之前（例如SmartPhones）。 AFAIK我無法使用純CSS交換元素，對於較小的分辨率，我必須這樣做。

有什么解決辦法嗎？

TL; DR我希望第一列（左側）擴展，而其余列具有特定寬度。 所有列的高度都必須為100％（即適合父級的高度），並且元素不應在標記中交換位置。

Answer 1

在css3中尋找calc（）函數 ？

您的解決方案在這里： http : //jsfiddle.net/NmrbP/19/

將所有內容都包裹在一個master容器中，然后對其進行浮動。...（ 不要忘記清除浮動 ）

CSS

  #master {
    width:100%;
    height:100%;
    border:1px solid #000;
}
#divLeft {
    float:left;
    background-color: lightgreen;
    width: calc(100% - 250px); /* extra loaded stuff by me */
    width: -moz-calc(100% - 250px); /* to make cross browser */
    width: -webkit-calc(100% - 250px);  /* to make cross browser */
    height:100%; /* give div full height */
}
#divRight {
    float:left;
    background-color: lightblue;
    vertical-align: top;
    width : 250px; /* extra loaded stuff by me */
    height:100%; /* give div full height */
}

.clr{
    clear:both; /* extra loaded stuff by me */
}