html布局(两列布局的常见方式)

前端项目中，适配各种屏幕分辨率是比较常见的需求；vue工程中如何适配1080p和2k屏幕呢；有下面两种方式第一种:常见的css中，使用媒体查询；vue中可以借助scss，通过函数方式计算需要适配的像素值，会很方便；给同一个元素定义两个class<style lang="less" scoped>/* 2k分辨率 */@media screen and(min-width: 1921px

杨大大28

3619人浏览 · 2021-03-25 23:03:44

杨大大28 · 2021-03-25 23:03:44 发布

描述:当前端开发者拿到ui设计稿，首先实现的便是页面布局；本节介绍常见的几种布局方式；当然这些布局方式不仅仅用来做整个页面的布局，在某个弹窗或者工具栏中都可以使用

1 两列自适应布局

1.1 第一个div浮动，第二个div用margin-left的方式

首先写如下两个div,设置一样高度，然后效果如下:

<!DOCTYPE html>
<html>
<head>
    <title>html布局(两栏布局和三栏布局的常见方式)</title>
    <style type="text/css">
        .left{
            height:120px;
            background: pink;
        }
        .right{
            height:120px;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</body>
</html>

这里运行效果是为了强调一下，div等块状元素宽度默认值是100%;

言归正传;左边设置左浮动，下面div会浮动在下面，然后设置左侧margin-left即可实现如下效果:

.left{
    float:left;
    width:200px;
    height:120px;
    background: pink;
}
.right{
    margin-left:200px;
    height:120px;
    background: gray;
}

1.2 第一个div浮动，第二个用overflow:hidden的方式

.left{
    float:left;
    width:200px;
    height:120px;
    background: pink;
}
.right{
    overflow: hidden;
    height:120px;
    background: gray;
}

1.3 借助display:table实现；该css属性，你可以理解为没有边框的表格，里面的元素都可以理解为table的单元格内容

<!DOCTYPE html>
<html>
<head>
    <title>html布局(两栏布局和三栏布局的常见方式)</title>
    <style type="text/css">
    .box{
        display:table;
        width: 100%;
    }
    .left{
        display:table-cell;
        width:200px;
        height:120px;
        background: pink;
    }
    .right{
        display:table-cell;
        height:220px;
        background: gray;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>
</body>
</html>

上面三种是两列自适应布局的常用方式；平时工作中可以自行选取；

应用场景不限于整个网页，比如弹窗窗口顶部的标题栏，也可以采取上面方式；熟练使用后，可以大大提高效率

这里再强调一个点；还是第一个div浮动，如果两个div高度不同，效果如下

.left{
    float:left;
    width:200px;
    height:120px;
    background: pink;
}
.right{
    height:220px;
    background: gray;
}

很明显，后面div移动到了浮动div的下面，被覆盖；但是div的文字却没有被覆盖，而是自动避开；这里需要特别注意；以后布局可以加以利用；

一切的细节知识，都会在未来某个点帮你节省效率和提升好心情。

2 三栏布局

三栏布局请见双飞翼和圣杯布局一节 http://xiaobaigis.com/Home/WebArticle?ID=9

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^