使用弹性盒布局来实现元素宽度与高度的自适应

<style type="text/css">
#container{
display: -moz-box;
display: -webkit-box;
border: solid 1px blue;
-moz-box-orient: horizontal;
-webkit-box-orient:horizontal;
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}

<div id="container">
<div id="text-a">示例文字A</div>
<div id="text-b">示例文字B</div>
<div id="text-c">示例文字C</div>
</div>