我该如何用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垫片作为练习留给读者。