css2实现两列三列布局的方法-css教程-PHP中文网

css2实现两列三列布局的方法

一个新手

发布： 2017-10-18 09:43:10

原创

1897人浏览过

前言

对于 flex 弹性布局相信大家都有所了解，它是 css3 中的属性，然而它具有一定的兼容性问题。楼主前几天面试时遇到了面试官需要设计一个两列布局，我当然就说父元素 flex 吧哩吧啦，然而需要用基本的 css2 中的属性布局，傻掉了。。。

要求：两列布局，左边定宽，右边自适应

html 布局如下

立即学习“前端免费学习笔记（深入）”；

<p id="father">
    <p id="left">我是定宽左</p>
    <p id="right">我是自适应右</p>
</p>

登录后复制

1. flex 布局

科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

查看详情

#father{
            display: flex;
        }
        #left{
            background: red;
            height: 200px;
            width: 200px;
        }
        #right{
            background: green;
            height: 200px;
            flex:1;
        }

登录后复制

2. css2 普通布局

 <style>
        #left{
            background: red;
            height: 200px;
            width: 200px;
            float:left;
        }
        #right{
            background: green;
            height: 200px;
            margin-left:200px;
        }
    </style>

登录后复制

　注意：

　　多列布局时需要将浮动元素的 html 代码写在自适应元素的前面。如以下为三列布局的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #p1{
            width: 200px;
            height: 200px;
            background: red;
            float:left;
        }
        #p2{
            margin-left: 200px;
            margin-right:  200px;
            height: 200px;
            background: green;
        }
        #p3{
            width: 200px;
            height: 200px;
            background: red;
            float:right;
        }
    </style>
    
</head>
<body>
<p id="box">
    <p id="p1">我是左定宽</p>
    <p id="p3">我是中间自适应</p>
    <p id="p2">我是右定宽</p>
</p>
</body>
</html>

登录后复制

效果如图：