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>
  • 相关阅读:
    cstring string 比较之二(学习笔记)
    转 大话设计模式学习笔记(思维导图) 更新中
    转 十三种设计模式的思维导图
    (转)关于栈、堆、静态存储区最大可分配大小的探讨 海量之一
    如何学习网络协议(学习笔记)
    境界篇:linux 驱动开发的境界(学习笔记)
    b.关于vc编程境界的讨论
    关于编程境界的小结
    Java异常(一) Java异常简介及其架构
    多线程简单阐述
  • 原文地址:https://www.cnblogs.com/sxly/p/9320924.html
Copyright © 2011-2022 走看看