布局：左宽度固定，右边自适应

需求：

左侧固定宽，右侧自适应屏幕宽；

左右两列，等高布局；

左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）

 

方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #left {
        float: left;
        width: 220px;
        background-color: green;
    }
    #content {
        background-color: orange;
        margin-left: 220px;/*==等于左边栏宽度==*/
    }
</style>
<body>
    <div id="left">Left sidebar</div>
    <div id="content">Main Content</div>
</body>
</html>

 

 

 

 

方法二：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果

这个方法有个缺点就是左边的固定块被右边的父元素遮挡住了，如果左边是一个菜单需要点击，那么这个方法就不是很适用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #left {
        background-color: green;
        float: left;
        width: 220px;
        margin-right: -100%;
    }
    #content {
        float: left;
        width: 100%;
    }
    #contentInner {
        margin-left: 220px;/*==等于左边栏宽度值==*/
        background-color: orange;
    }
</style>
<body>
    <div id="left">Left Sidebar</div>
    <div id="content">
        <div id="contentInner">Main Content</div>
    </div>
</body>
</html>

 

 

方法三：网格布局

关键点在于设置grid-template-columns: 200px auto;，第一个200px表示左边的，auto表示右边的自动，如果需要设置等高的效果，将grid-template-rows: 200px;这个属性去掉，可以给left和right都设置一个最小的高度，如果内容超出的话，会自动增加高度（一边超出高度，两边都会自动增加高度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout.grid .left-right-center{
        width:100%;
        display: grid;
        grid-template-rows: 200px;
        grid-template-columns: 200px auto;
    }
    .left{
        background-color: red;
    }
    .right{
        background-color: blue;
    }
</style>
<body>
<section class="layout grid">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
    </article>
</section>
</body>
</html>
posted @ 2018-11-06 17:26  胡椒粉hjf  阅读(507)  评论(0)  编辑  收藏  举报