zoukankan html css js c++ java

DIV左、右布局

1、右边宽度固定，左边自适应

　　第一种(flex布局，不兼容IE9以下浏览器)：

<style>
    body {
        display: flex;
    }

    .left {
        background-color: aqua;
        height: 200px;
        flex: 1;
    }

    .right {
        background-color: bisaue;
        height: 200px;
        width: 100px;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

　　第二种：

<style>
    div {
        height: 200px;
    }

    .left {
        float: right;
        background-color: aqua;
        width: 200px;
    }

    .right {
        background-color: bisaue;
        margin-right: 200px;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

2、左边定宽，右边自适应：

<style>
    .left {
        float: left;
        width: 200px;
        background-color: aqua;
        height: 200px;
    }

    .right {
        background-color: bisque;
        height: 200px;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

查看全文

相关阅读:
webpack的安装与配置
 npm初始化
 gitignore的配置
 git本地已有文件夹和远程仓库对应
 git 配置
 开发环境和开发工具
 git 码云使用教程
 递归
 LeetCode 392. 判断子序列
 MongoDB基本操作

原文地址：https://www.cnblogs.com/minozMin/p/8567586.html