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

#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;

}

示例文字A

示例文字B

示例文字C