CSS两栏布局和三栏布局

---恢复内容开始---

　　马上要到秋招了，开始在牛客网上刷题，今天刷了一个阿里的16年前端笔试题的编程题：两栏布局。自己做的还是不好，所以查了资料写一下CSS中两栏布局和三栏布局

1.两栏布局

原题是“核心区域左侧自适应，右侧固定宽度 200px”

方法一：自身浮动法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #aside{
            float: right;
            width:200px;
            border:1px solid red;
        }
        #content{
            margin-right: 201px;
            border:1px solid blue;
            height:400px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div id="aside">aside-定宽200px</div>
        <div id="content">content-自适应宽度</div>
    </div>
</body>
</html>

方法二：margin负值法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .content{
            width: 100%;
            float: left;
            height: 400px;
        }
        #left{
            margin-right: 200px;
            background-color: aquamarine;
            height: 400px;
        }
        #right{
            float: left;
            margin-left: -200px;
            background-color: blue;
            height: 400px;
        }
    </style>
</head>
<body>
     <div class="content">
        <div id="left"></div>
     </div>
     <div id="right">aside-定宽200px</div>
     <!--<div id="middle">content-自适应宽度</div>-->
</body>
</html>

在自适应块left外再包一层div父层，并设置父层content左浮动，宽度为100%；子层left设置右边距为右侧right块的宽度；最后设置固定块为左浮动，设置margin-left:-200px;

2.三栏布局

方法一：绝对定位法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            width: 100%;
        }
        #left, #right{
            position: absolute;
            top: 0px;
            width: 200px;
            height: 100%;
        }
        #left{
            left: 0px;
            background-color: aquamarine;
        }
        #right{
            right: 0px;
            background-color: red;
        }
        #mid{
            margin: 0 200px;
        }
    </style>
</head>
<body>
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</body>
</html>

绝对定位法就是将左右栏进绝对定位，而中间栏只要设置左右margin为左右栏的宽度就可以。

方法二：margin负值法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body{
            margin: 0;
            height: 100%;
        }
        #main{
            width: 100%;
            height: 100%;
            float: left;
        }
        #body{
            margin: 0 200px;
            height: 100%;
            background-color: blueviolet;
        }
        #left, #right{
            width: 200px;
            float: left;
            height: 100%;
        }
        #left{
            margin-left: -100%;
            background-color: aquamarine;
        }
        #right{
            margin-left: -200px;
            background-color: chocolate;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

把要自适应宽度的块放在最前面，并在外面包裹一层id为main的div父层，对该父层设置左浮动，然后再对id为body的子层设置左右边距margin：0 200px；并设置左右块为左浮动；并设置左边块的左边距为-100%；右块的左边距为-200px；很奇怪，把黄色部分去掉就出不来结果，不知道这是什么原因

方法三：自身浮动法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body{
            margin: 0;
            height: 100%;
        }
       #main{
           margin: 0 200px;
           height: 100%;
           background-color: beige;
       }
        #left{
            width: 200px;
            float: left;
            height: 100%;
            background-color: aqua;
        }
        #right{
            width: 200px;
            float: right;
            height: 100%;
            background-color: palevioletred;
        }

    </style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
</html>

把中间块放在最后。

posted on 2017-07-13 17:38  laoguigui  阅读(2701)  评论(0)  编辑  收藏  举报

导航