【css】css2实现两列三列布局的方法

时间 2019-11-10

标签 css css2 实现布局方法栏目 CSS 繁體版

原文原文链接

本文转载于:猿2048网站【css】css2实现两列三列布局的方法php

前言css

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

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

html 布局以下面试

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

1. flex 布局布局

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

2. css2 普通布局flex

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

　注意：网站

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

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

效果如图：设计