zoukankan      html  css  js  c++  java
  • 网页布局——左侧固定,右侧自适应

    第一种方法:采用绝对定位

    <!DOCTYPE>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .one {
    position: absolute;
    height: 200px;
    width: 300px;
    background-color: blue;
    }
    .two {
    height: 200px;
    margin-left: 300px;
    background-color: red;
    }
    </style>
    </head>
    <body>
    <div class="one"></div>
    <div class="two">第一种方法</div>
    </body>
    </html>

    第二种方法:采用左浮动

    <!DOCTYPE>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .one {
    float:left;
    height: 200px;
    width: 300px;
    background-color: blue;
    }
    .two {
    overflow: auto;
    height: 200px;
    background-color: red;
    }
    </style>
    </head>
    <body>
    <div class="one"></div>
    <div class="two">第二种方法</div>
    </body>
    </html>

     第三种方法:采用flex布局(推荐使用)

    <!DOCTYPE>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>Document</title>
    <style>
    *{padding: 0;margin: 0;}
    #oo{
        display: flex;
        flex-wrap: wrap;
    }
    .one {
        float:left;
        height: 200px;
        width: 200px;
        background-color: blue;
    
    }
    .two {
        background-color: red;
        flex: 1;    
    }
    .three{
        background-color: pink;
        flex: 2;
    }
    </style>
    </head>
    <body>
    <div id="oo">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    fork子进程
    多输入使用多线程
    多输入select
    多输入之轮询
    开启telnet
    slickedit编译调试linux应用程序
    电子书框架
    通用Makefile
    STDIN_FILENO和stdin
    libiconv交叉编译提示arm-none-linux-gnueabi-gcc
  • 原文地址:https://www.cnblogs.com/lqzweb/p/6211101.html
Copyright © 2011-2022 走看看