zoukankan      html  css  js  c++  java
  • 经典三栏布局

    1. 采用浮动的方式
    <!DOCTYPE>
    <html>
        <head>
            <meta charset="utf-8">
            <title>三栏布局</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                
                #wrap1{
                    margin: 0 100px;
                }
                #wrap div{
                    height: 300px;
                }
                #wrap .left{
                    float: left;
                     200px;
                    background: green;
                }
                #wrap .content{
                    margin: 0 200px;
                    background: red;
                }
                #wrap .right{
                    float: right;
                     200px;
                    background: yellow;
                }
            </style>
        </head>
        <body>
            <div id="wrap">
                <div class="left"></div>
                <div class="right"></div>
                <div class="content"></div>
            </div>
        </body>
    </html>
    
    1. 采用flex方式
    <!DOCTYPE>
    <html>
        <head>
            <meta charset="utf-8">
            <title>三栏布局</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
    
                #wrap{
                    margin: 20px 100px;
                    display: flex;
                    flex-flow: row nowrap;
                }
                #wrap div{
                    height: 300px;
                }
                #wrap .left{
                    flex-grow: 0;
                     200px;
                    background: green;
                }
                #wrap .content{
                    flex: 1 1 auto;
                    background: red;
                }
                #wrap .right{
                    flex-grow: 0; 
                     200px;
                    background: yellow;
                }
            </style>
        </head>
        <body>
            <div id="wrap">
                <div class="left"></div>
                <div class="content"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>
    

    目前感觉这两种方式比较实用,欢迎补充

  • 相关阅读:
    字符编码及文件处理
    列表、元祖、字典及集合的内置方法
    数字类型、字符串及列表的内置方法
    流程控制(if while for)
    一些基本概念及数据类型
    编程语言的发展及变量
    python 入门基本知识
    叁拾贰(转)
    叁拾壹
    叁拾
  • 原文地址:https://www.cnblogs.com/stone-it/p/7373296.html
Copyright © 2011-2022 走看看