【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>

效果如圖：設計

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。