布局常见问题之左右栏布局 

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta content="telephone=no" name="format-detection" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>详情页面</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .center{
            background-color: red;
            position: absolute;
            left: 0;   /*left和right 同时为0，则自动铺满全局宽度。*/
            right: 0;
            top: 0;
            margin-top: 50px;
            margin-left: 200px;
        }
        .center-center{
            width: 100%;
        }
        .left-layout{     /*常规左边栏*/
            width: 200px; 
            height: 600px;
            background-color: pink;
        }

    </style>
</head>
<body>
<div class="left-layout"></div>
<div class="center">
    <p class="center-center">未知元素宽度时居中方法</p>
</div>
</body>
</html>

　　

posted @ 2015-08-26 10:55  越来越好888  阅读(154)  评论(0)    收藏  举报