CSS 负边距自适应布局

最新推荐文章于 2022-08-18 09:49:53 发布

weixin_34162695

最新推荐文章于 2022-08-18 09:49:53 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/xupeiyu/p/3652280.html

版权

单列定宽单列自适应布局：

 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>单列定宽单列自适应布局</title>
    <style type="text/css">
        * {margin:0;padding:0;}
        .cont, .side {float:left;}
        .cont {width:100%;}
        .main {margin-right:200px;background:#DDDDDD;}
        .side {margin-left:-200px;width:200px;background:#F7F7F7;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="main">main</div>
    </div>
    <div class="side">side</div>
</body>
</html>

　　左右定宽中间自适应布局：

 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>左右定宽中间自适应布局</title>
    <style type="text/css">
        * {margin:0;padding:0;}
        .cont, .side, .sub-main {float:left;}
        .cont {width:100%;}
        .main {margin-right:200px;margin-left:300px;background:#DDDDDD;}
        .side {margin-left:-200px;width:200px;background:#F7F7F7;}
        .sub-main {margin-left:-100%;width:300px;background:#F7F7F7;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="main">main</div>
    </div>
    <div class="side">side</div>
    <div class="sub-main">sub-main</div>
</body>
</html>

　　两列等高自适应布局：

 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>两列等高自适应布局</title>
    <style type="text/css">
        * {margin:0;padding:0;}
        .layout {overflow:hidden;}
        .cont, .side {float:left;padding-bottom:9999px;margin-bottom:-9999px;}
        .cont {width:100%;}
        .main {margin-right:200px;background:#DDDDDD;}
        .side {margin-left:-200px;width:200px;background:#F7F7F7;}
    </style>
</head>
<body>
    <div class="layout">
        <div class="cont">
            <div class="main">
                main
                <br/><br/><br/><br/><br/><br/><br/>
            </div>
        </div>
        <div class="side">side</div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/xupeiyu/p/3652280.html