zoukankan      html  css  js  c++  java
  • 简单实现栅格布局的两种方式

    一、使用float:

    复制代码
    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    section
    {
    border: solid 1px;
    }
    section section
    {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    200px;
    border-radius: 20px;
    height: 200px;
    }
    .parent
    {
    height: 440px;
    660px;
    }
    .parent section:first-child
    {
    height: 410px;
    }
    </style>
    </head>
    <body>
    <section class="parent">
    <section>A</section>
    <section>B</section>
    <section>C</section>
    <section>D</section>
    <section>E</section>
    </section>
    </body>
    </html>

    二、使用display:flex(这个css3属性仅谷歌和火狐支持)

    复制代码
    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    section
    {
    border: solid 1px;
    }
    section section
    {
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    200px;
    border-radius: 20px;
    height: 200px;
    }
    .parent
    {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 440px;
    660px;
    }
    .parent section:first-child
    {
    height: 410px;
    }
    </style>
    </head>
    <body>
    <section class="parent">
    <section>A</section>
    <section>B</section>
    <section>C</section>
    <section>D</section>
    <section>E</section>
    </section>
    </body>
    </html>

     实现效果如图所示:

  • 相关阅读:
    Django框架-选项卡加active类的方案
    Django框架-管理后台项目之分页实现
    Django框架-Auth组件
    Django框架-Form组件
    Django框架-AJAX
    Django框架-中间件
    Django框架-cookie与session
    Django框架-Django模型(models)系统
    Django框架-Django视图(views)系统
    Django框架-Django模板(template)系统
  • 原文地址:https://www.cnblogs.com/jymz/p/4511091.html
Copyright © 2011-2022 走看看