我該如何用CSS來做這件事，還是我使用了一張桌子？

Question

我希望在100％的頁面上有2個div，在頁面的100％下有2個div。 像：

---------------- 
    | 1 |  2  | 
    ----------------- 
    |  3  | 
    ----------------- 

但這裏是抓

• 1區：必須獲得更寬或更長的時間有關其內容的頁面加載時被添加
• DIV 2：必須採取的寬度剩下的。
• DIV 3：必須始終根據其含量的1個2 regardles有100％

打字時，我想，也許最好使用一個表來存儲裏面的div？

想聽聽我該怎麼做，或者如果它更好地使用表。

編輯

忘了說我喜歡becouse它的div內其他樣式配發食堂不使用浮動。

Answer 1

您可以將其作爲CSS表執行，請參閱以下內容。

.wrap { 
 
    display: table; 
 
    width: 100%; /*full length*/ 
 
} 
 
.d1, .d2 { 
 
    display: table-cell; 
 
    white-space: nowrap; /*no wrap in the cells*/ 
 
} 
 
.d2 { 
 
    width: 100%; /*it always receives all the remain length*/ 
 
} 
 

 
/*demo purpose only follows*/ 
 
.d1 { background: red; } 
 
.d2 { background: green; } 
 
.d3 { background: blue; }

<div class="wrap"> 
 
    <div class="d1">1</div> 
 
    <div class="d2">2</div> 
 
</div> 
 
<div class="d3">3</div>

小提琴演示：http://jsfiddle.net/t0sL1dck/

Answer 2

我提供了一個解決方案，該解決方案將需要提供的第二個div最大寬度：

<div style='float:left;'>div1</div> 
<div style='float:right;max-width:100px;'>div2</div> 
<div style='clear:both;width:100%'>div3</div 

Answer 3

我能想到的，現在最好的是兩個表，一個是頂部和一個爲底部。 重要的是設置

width:1%; 
white-space:nowrap; 

對於要在內容上改變大小的表格單元格（1號），併爲colspan="2"應該佔據整個寬度的單元格。

，您可以嘗試和改變「變文」的東西更長和更短：

JSFiddle （後你改變它，您需要點擊「運行」）

HTML：

<table> 
    <tr> 
     <td id="custom">Variable Text</td> 
     <td>This takes up the rest</td> 
    </tr> 
    <tr><td colspan="2">This takes up the rest</td></tr> 
</table> 

CSS：

table { 
    width:100%; 
    text-align:center; 
} 
td { 
    border:1px solid #000; 
    padding:20px; 
} 
#custom{ 
    width:1%; 
    white-space:nowrap; 
} 

Answer 4

使用flexible boxes。設置一個收縮和兩個增長到填補剩餘空間。

#container { 
 
    display: flex; 
 
} 
 
#one { 
 
    flex: 0 1 auto; 
 
    background: white; 
 
} 
 
#two { 
 
    flex: 1 0 auto; 
 
    background: red; 
 
} 
 
#three { 
 
    background: green; 
 
}

<div id="container"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
</div> 
 
<div id="three">three</div>

與older browsers兼容使用前綴屬性和JavaScript墊片作爲練習留給讀者。