一列定宽，一列自适应 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 一列顶宽200px，外边距10，一列自适应 */
        *{margin: 0;padding: 0;}
        .aa{text-align: center; line-height: 200px; color: white;}

        /* 单浮动 */
        /*.bb{float: left; width: 200px; height: 200px; }*/
        /*.cc{height: 200px; margin-left: 210px; background-color: blue;}*/

        /* 双浮动；现代浏览器 calc()计算 */
        /*.bb{float: left; width: 200px; height: 200px; }*/
        /*.cc{float: right; width:calc(100% - 210px); height: 200px; background-color: blue; }*/

        /*主栏定位*/
        /*.aa{position: relative; text-align: center; line-height: 200px; color: white; padding-left: 210px; }*/
        /*.bb{position: absolute; top: 0; left: 0; width: 200px; height: 200px; }*/
        /*.cc{width: 100%; height: 200px; background-color: blue;}*/

        /*侧栏定位*/
        /*.aa{position: relative; text-align: center; line-height: 200px; color: white;}*/
        /*.bb{width: 200px; height: 200px; }*/
        /*.cc{position: absolute; left: 210px; top:0; right: 0; height: 200px; background-color: blue;}*/

        /* Tab */
        /*.aa{display: table; text-align: center; line-height: 200px; color: white;}*/
        /*.bb{width: 200px; height: 200px; margin-right: 10px; }*/
        /*.cc{display: table-cell; width: 100%; height: 200px; background-color: blue;}*/

    </style>
</head>
<body>
<div class="aa">
    <div class="bb">bb</div>
    <div class="cc">cc</div>
</div>
</body>
</html>
posted @ 2015-12-23 00:25  /null  阅读(220)  评论(0)    收藏  举报