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>
  • 相关阅读:
    [转]VSTO Office二次开发RibbonX代码结构
    [转]VSTO+WinForm+WebService+WCF+WPF示例
    Ext Js简单Data Store创建及使用
    Web页面常用文件格式文件流的输出
    VSTO Office二次开发PPTRibbonX命令操作及对象添加
    VSTO Office二次开发键盘鼠标钩子使用整理
    VSTO Office二次开发对PPT自定义任务窗格测试
    VSTO Office二次开发对PowerPoint功能简单测试
    Ext Js简单Tree创建及其异步加载
    VB获取和更改文件属性
  • 原文地址:https://www.cnblogs.com/sxly/p/9320924.html
Copyright © 2011-2022 走看看