画页面的时候经常遇到页面布局的问题，父级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. Solr5.5.3的研究之路 ---1、从Mysql导入数据并创建索引

    公司需要用到全文检索,故使用Solr,也是新人一枚,本人查看的前提是Solr已经安装部署成功,我用的服务器是自带的Jetty 1.创建Collection [root@whoami bin]# ./s ...

  2. [luogu3385]dfs_spfa判负环模板

    解题关键:模板保存. 判负环不需要memset dis数组,因为已经更新过得d数组一定小于0,如果当前点可以更新d,说明d更小,有可能继续扩大负环,所以继续更新:如果比d[v]大,则不可能继续更新负环 ...

  3. WebSocket详解（一）：初步认识WebSocket技术

    1.什么是Socket?什么是WebSocket? 对于第1次听说WebSocket技术的人来说,两者有什么区别?websocket是仅仅将socket的概念移植到浏览器中的实现吗? 我们知道,在网络 ...

  4. Zbar -- 源码分析

    博客转载自:https://blog.csdn.net/sunflower_boy/article/details/50783179 //Img_scanner.c 文件内 int zbar_scan ...

  5. PCL—点云分割（RanSaC）低层次点云处理

    博客转载自:http://blog.csdn.net/app_12062011/article/details/78131318 点云分割 点云分割可谓点云处理的精髓,也是三维图像相对二维图像最大优势 ...

  6. 第一篇:Django基础

    Django框架第一篇基础 一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref模块的图片 一.MTV模型 Django的MTV分别代表: Model ...

  7. AbstractBootstrap的研读

    AbstractBootstrap是一个工具类,用来配置和启动Channel的,下面看下AbstractBootstrap的类继承,ServerBootstrap用于启动ServerChannel的, ...

  8. XML DTD语法详解

    XML DTD详解   XML DTD详解 前情提要与本文内容介绍 前面的两篇XML相关博文: 第一篇是介绍格式正规的XML: 格式正规的XML:语法 属性 实体 处理指令 样式单 CDATA节 第二 ...

  9. PL/SQL与SQL（Oracle）Case语句

    (使用scott账户下的表) 1.Oracle SQL语句的case语句写法: --sql中的case用于分支判断并返回某个值. select empno , ename, deptno , case ...

  10. register的功能

    register:这个关键字请求编译器尽可能 的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率.这里注意是尽可能,不是绝对.你想想,一个CPU拥有 的寄存器也就那么几个或几十个,你要 ...