zoukankan      html  css  js  c++  java
  • 布局复习,左右定宽中间自适应的五种方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    padding:0;
    margin: 0;
    }
    .layout {
    margin-top: 20px;
    }
    .layout article div {
    min-height:100px;
    }
    </style>
    </head>
    <body>
    浮动
    <section class="layout float">
    <style>
    .fl{
    float:left;
    300px;
    background-color: red;
    }
    .fr {
    float:right;
    300px;
    background-color: aqua;
    }
    article div:last-of-type {
    background-color: yellow;
    }
    </style>
    <article>
    <div class="fl"></div>
    <div class="fr"></div>
    <div>浮动方案</div>
    </article>
    </section>
    定位
    <section class="layout position">
    <style>
    .position div {
    position: absolute;
    }
    .position article .left {
    left:0;
    300px;
    background-color: red;
    }
    .position article .center {
    left:300px;
    right:300px;
    background-color:yellow ;
    }
    .position article .right {
    right:0;
    300px;
    background-color: aqua;
    }
    </style>
    <article>
    <div class="left"></div>
    <div class="center">绝对定位方案</div>
    <div class="right"></div>
    </article>
    </section>
    flexbox
    <section class="layout flex">
    <style>
    .flex article {
    display: flex;
    flex-direction: row;
    margin-top: 140px;
    }
    .flex article .left {
    300px;
    background-color: red;
    }
    .flex article .center {
    flex:1;
    background-color:yellow ;
    }
    .flex article .right {
    300px;
    background-color: aqua;
    }
    </style>
    <article>
    <div class="left"></div>
    <div class="center">flex方案</div>
    <div class="right"></div>
    </article>
    </section>
    table
    <section class="layout table">
    <style>
    .table article {
    100%;
    height: 100px;
    display: table;
    }
    .table article div {
    display: table-cell;
    }
    .table article .left {
    300px;
    background-color: red;
    }
    .table article .center {
    background-color:yellow ;
    }
    .table article .right {
    300px;
    background-color: aqua;
    }
    </style>
    <article>
    <div class="left"></div>
    <div class="center">table方案</div>
    <div class="right"></div>
    </article>
    </section>
    网格
    <section class="layout grid">
    <style>
    .grid article{
    display: grid;
    100%;
        网格中的行数及行的高度
    grid-template-rows: 100px;
    每列宽度
    grid-template-columns: 300px auto 300px;
    }
    .grid article .left {
    background-color: red;
    }
    .grid article .center {
    background-color:yellow ;
    }
    .grid article .right {
    background-color: aqua;
    }
    </style>
    <article>
    <div class="left"></div>
    <div class="center">网格方案</div>
    <div class="right"></div>
    </article>
    </section>
    </body>
    </html>
  • 相关阅读:
    了解外界的窗口
    博客添加卡通精灵
    LINUX chage 命令 以及常用参数
    Linux系统 端口知识以及相关监听工具
    Linux 常用命令之cp
    树莓派的知识分享
    ghost一键备份还原工具使用指南
    使用rsync在Windows(服务端)与Linux (客户端)之间的同步
    制作linux 随身碟
    白嫖!1000+个常用的Linux命令!
  • 原文地址:https://www.cnblogs.com/sxly/p/9320924.html
Copyright © 2011-2022 走看看