zoukankan      html  css  js  c++  java
  • 页面布局常用,让子级div排排坐

    画页面的时候经常遇到页面布局的问题,父级div包裹多个子div很常见,代码如下:

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <div class="father">
    <div class="child all">1</div>
    <div class="child all">2</div>
    <div class="child all">3</div>
    </div>
    </body>

    但是效果如下:

    如果我想让多个子div横着排排坐,加 float:left 这个是个办法。效果如下:

    为什么加float浮动会有效果,因为float 属性定义的元素如果没有指定一个明确的宽度,他们会尽可能地窄。

    另一种办法是,给父级div加 display:table,然后给子div加 display:table-cell; 示例如下:

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .father {
    display: table;
    }
    .child {
    display: table-cell;
    background: green;
    }

    </style>
    </head>
    <body>
    <div class="father">
    <div class="child all">1</div>
    <div class="child all">2</div>
    <div class="child all">3</div>
    </div>
    </body>
  • 相关阅读:
    要加班了!
    项目经理的职责[转]
    用例图(User Case)
    c# 获取收藏夹目录到树型控件
    活动图(Activity Diagram)
    switch case重构事例[转]
    iframe 语法小结
    CSS入门
    Net中几种不同方式的文件下载
    网页效果集合
  • 原文地址:https://www.cnblogs.com/1rookie/p/7117788.html
Copyright © 2011-2022 走看看