CSS+div左中右经典布局（一） 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>15-25</title>
    <style type="text/css">
    #mainbox{
        border:1px #000000 solid;
        padding:10px;
        position: relative;
        width:340px;
    }
    #left{
        border:1px #000000 solid;
        left:10px;
        bottom:10px;
        padding:10px 0px;
        position: absolute;
        width:100px;
        height:100px;
    }
    #middle{
        border:1px #000000 solid;
        margin:10px 0px 0px 0px;
        padding:10px 0px;
        width:100px;
        height: 100px;
    }
    #right{
        border:1px #000000 solid;
        bottom:10px;
        right:10px;
        padding: 10px 0px;
        position: absolute;
        width:100px;
        height:100px;    
    }
    </style>
</head>
<body>
    <div id="mainbox" align="center">
      <div>#mainbox</div>
      <div id="middle">#middle</div>
      <div id="left">#left</div>
      <div id="right">#right</div>
    </div>
</body>
</html>

 

#mainbox
#middle
#left

posted on 2017-10-15 20:39  迪迪菜源  阅读(547)  评论(0)  编辑  收藏  举报

导航