两侧固定中间自适应三栏布局

第一种方法:绝对定位:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      body,html{ padding: 0; margin: 0; height: 100%;}
        .left,.right{ width: 230px; height: 100%; position: absolute; top: 0;}
        .right{ right: 0; background: green;}
        .left{ left: 0; background: blue;}
        .main{ margin: 0 230px; height: 100%; background: yellow;}
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body>
</html>

这种方法是最简单,也是麻烦最多的,如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。我个人现在不再建议使用这种布局。

第二种方法:浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      body,html{ padding: 0; margin: 0; height: 100%;}
        .left,.right{ float: left; width: 230px; height: 100%; background: blue;}
        .right{ float: right; }
        .main{ margin: 0 230px; height: 100%; background: yellow;}
    </style>
</head><body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body>
</html>

这种方法和上面的绝对定位方法很相似,只不过这里采用的是浮动,而不是绝对定位,左右定宽度分别进行左浮动和右浮动,此时主内容列(中间列没有定度)主会自动插入到左右两列的中间,最要注意的一点是,中间列一定要放在左右两列的后面,

第三种方法:-marin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .main,.left,.right{ float: left; }
        .main{ width: 100%;}
        .main-inner{ margin: 0 230px; background: yellow; height: 500px; }
        .left{ margin-left: -100%; width: 230px; background: blue; height: 500px;}
        .right{ margin-left: -230px; width: 230px; background: green; height: 500px;}

    </style>
</head>
<body>
    <div class="main">
        <div class="main-inner"></div>
    </div>
    <div class="left">
    </div>
    <div class="right">
    </div>

</body>
</html>

此方法在中间div内又包含一个div让其左右留出空间又不影响整个儿浮动文本,左栏是左浮动并加了一个“margin-left: -100%”,这是因为div#left前面有一个div#main,并且其宽度为100%,这样一来在左栏定这个margin-left: -100%;刚好使左边栏定位到页面的最左边;而右栏也进行左浮动,但其定义的“margin-left”也是负值,并且等于其自身的宽度230px;

posted @ 2015-10-01 12:03  自_定义  阅读(328)  评论(0编辑  收藏  举报