画页面的时候经常遇到页面布局的问题，父级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>

页面布局常用，让子级div排排坐的更多相关文章

  1. python：页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  3. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  4. css书写规范 & 页面布局规范 &常用案例经验总结

    CSS 属性书写顺序(重点) 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 displa ...

  5. DIV页面布局，开局代码

    DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  6. CSS入门指南-4：页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...

  7. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  8. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  9. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

随机推荐

  1. 利用rowid删除数据库中无主键的相同记录

    数据库中表没有添加主键,误插入了两条数据,现在需要删除其中一条记录. 利用rowid号,因为表中的每一行数据都有一个rowid,这个rowid 号是不同的,用select可以查询出来. select ...

  2. 关于FILL_PARENTE和match_parent布局属性

    在观看早期的代码的时候,经常会看到FILL_PARENT属性,但是新的代码中却有了MATCH_PARENT 那么,两者有何区别呢? 答案是,没有,只是换了个名字而已,均为-1

  3. 使用git将代码传到github

    廖雪峰git教程:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 注:add加入 ...

  4. MyBatis01 MyBatis基础知识【搞清楚原理】

    1 MyBatis是什么 mybatis是一个持久层的框架,它对jdbc做了封装:是apache下的顶级项目 mybatis让程序将主要精力放在sql上,通过mybatis提供的映射方式,自由灵活生成 ...

  5. ruby 访问权限

    ##################### # 访问权限 ##################### class HeidSoft ##默认方法 def method1 ##### end prote ...

  6. ROS Learning-029 （提高篇-007 A Mobile Base-05） 控制移动平台 --- （Python编程）控制虚拟机器人的移动（精确的制定目标位置）

    ROS 提高篇 之 A Mobile Base-05 - 控制移动平台 - (Python编程)控制虚拟机器人的移动(精确的制定目标位置) 使用 odometry 消息类型 重写 out_and_ba ...

  7. Mat 类的内存管理

    使用 Mat 类,内存管理变得简单,不再像使用 IplImage 那样需要自己申请和释放内存.虽然不了解 Mat 的内存管理机制,也无碍于 Mat 类的使用,但是如果清楚了解 Mat 的内存管理,会更 ...

  8. 罗技K380连接Win10(MacBookPro双系统)系统失败

    问题描述: MacBook Pro 双系统,先连接MacOS使用没问题,切换至Win10系统,连接失败. 解决方案: 进入MacOS,打开蓝牙设置,将已经连接的键盘删除,重新进入Win10系统,再连接 ...

  9. 课后作业 利用for循环嵌出菱形

    for (int i = 1; i <= 11; i++) // i 的起始值是一 在<=11; 逐个递增 { int a, b, c;// 定义abc三数 for (a = 11; a ...

  10. spring分布式事务学习笔记（2）

    此文已由作者夏昀授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Model类如下:package com.xy.model 1 package com.xy.model;   ...