两列布局、三列适应布局、两列等高适应布局。

一. 两列布局：左侧定宽、右侧自适应。

四种方法：flex 、position、float和负外边距、外边距

1. 使用flex.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .main{
            display:flex;
        }
        .sitebar{
            flex:0 0 200px;
            order:-1;
//order属性用于更改在主轴方向上排列顺序,order数值越小，排列越靠前，默认为0，可以为负数
            background-color: green;
        }
        .content{
            flex:1;
            background-color: red;
        }
        
    </style>
</head>
<body>
    <div class="main">
        <div class="content">
            右侧自适应区块
        </div>
        <div class="sitebar">
            左侧定宽200px区块
        </div>
    </div>
</body>
</html>

2. 使用position，考虑了页面优化，右侧区域先加载。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .sitebar{
            width:200px;
            background-color: green;
        }
        .content{
            position: absolute;
            left: 200px;
            right:0;
            top:0;
            background-color: red;
        }        
    </style>
</head>
<body>
    <div class="content">
        右侧自适应区块
    </div>
    <div class="sitebar">
        左侧定宽200px区块
    </div>
</body>
</html>

3. 利用float和负外边距

这里的100%是相对于父元素, margin-left的意思是子元素的左边框距离父元素右边框的距离，我这里没考虑padding,border等因素哈

当设置left元素的margin-left:-100%;时，left元素的左边框会与父元素的左边框重合。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .main {
            width: 100%;
            float:left;
        }
        .main .content {
            margin-left: 200px;
            background-color: red;
        }
        .sitebar {
            width: 200px;
            float: left;
            background-color: green;
            margin-left: -100%;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="content">
            右侧自适应区块
        </div>
    </div>
    <div class="sitebar">
        左侧定宽200px
    </div>
</body>
</html>

二、三列布局：左右定宽，中间自适应。

圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。

三种方法：flex、绝对定位、使用负外边距。

1. flex

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .body{
            display:flex;
        }
        .content{
            flex:1;
            background-color: green;
        }
        .nav, .ads{
            /*//设置两个侧边栏宽度*/
            flex:0 0 200px;
            background-color: blue;
        }
        .nav {
        /*    把导航放到最左边*/
            order:-1;
            background-color: grey;
        }        
    </style>
</head>
<body>
    <div class="body">
        <main class="content">center</main>
        <nav class="nav">left</nav>
        <aside class="ads">right</aside>    
    </div>
        
</body>
</html>

2. 绝对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            margin: 0px;
        }
        .left {
            background-color: red;
            width:100px;
            position: absolute;
            top: 0px;
            left:0px;
        }
        .center {
            background-color: grey;
            margin-left: 100px;
            margin-right: 100px;
        }
        .right {
            background-color: green;
            width:100px;
            position: absolute;
            top:0px;
            right:0px;
        }    
    </style>
</head>
<body>
    <div class="center">中间</div>
    <div class="left">左列</div>
    <div class="right">右列</div>
</body>
</html>

三、两列等高布局。

利用padding-bottom的正值与margin-bottom的负值相互抵消即可，同时最外层设置overflow:hidden;即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .main {
            margin: 0 auto;
            overflow: hidden;
            width: 600px;
        }
        .left {
            background-color: red;
            width:300px;
            float:left;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
        .right {
            background-color: green;
            width:300px;
            float:left;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }    
    </style>
</head>
<body>
    <div class="main">
        <div class="left">
            <p style="height:200px">left</p>
        </div>
        <div class="right">
            <p style="height:300px">right</p>
        </div>
    </div>
</body>
</html>

posted @ 2019-04-25 19:24 sarah_wen 阅读(343) 评论(0) 收藏举报

刷新页面返回顶部

sarah_wen

两列布局、三列适应布局、两列等高适应布局。

公告