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

  1. <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; 示例如下：

  1. <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .father {
               display: table;
            }
            .child {
                display: table-cell;
                background: green;
            }
  2.  
  3.     </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. java在Win7 64位 获取客户端的IP,MAC,计算机名

    package com.javaweb.util; import java.io.IOException; import java.io.InputStreamReader; import java. ...

  2. CheckBoxJS选中与反选得到Value

    function XuanZe(val) {    datastr = $("#hid_AID").val();    var newstr = "";    ...

  3. g2o20160430下的csparse文件夹内的CMakeLists.txt

    1. g2o20160430下的csparse文件夹内的CMakeLists.txt cmake_minimum_required(VERSION 2.6) PROJECT(csparse) SET( ...

  4. RTX这种东西究竟有什么价值？

    我在第一家公司工作的时候,同事沟通用的就是RTX,第一感觉就是这么简单的软件也能卖钱? 这种东西有啥价值啊?不就是个没广告蓝色UI的qq吗? 还是那句话,当你已经习惯了一个东西之后,你不会感觉到他的价 ...

  5. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-006Mixing inheritance strategies(@SecondaryTable、@PrimaryKeyJoinColumn、<join fetch="select">)

    一.结构 For example, you can map a class hierarchy to a single table, but, for a particular subclass, s ...

  6. spoj1716 Can you answer these queries III

    传送门 (分析见正睿2018.10.1笔记) 代码 #include<iostream> #include<cstdio> #include<cstring> #i ...

  7. linux文件夹下载

    1.压缩文件夹 tar cvzf ./chinese.tar.gz /usr/share/fonts/chinese 2.下载 sz chinese.tar.gz

  8. Python--socket和threading编程

    网络编程基础(一) TCP/IP协议 OSI/RM协议 特点:独立于计算机硬件和操作系统,统一分配网络地址,提供可靠服务,隔离了物理网络的硬件差异 协议分层(百度):网络接口层:IEE802.3(以太 ...

  9. 发现C#winform编程中不常用的控件（一）<FlowLayoutPanel控件><拆分器控件Splitcontainer >

    第一部分:FlowLayoutPanel控件 实现效果: 将FlowLayoutPanel做为导航菜单按钮的容器 以实现 某个菜单按钮不显示时 整体的导航菜单布局不至于"缺憾" 原 ...

  10. WebGoat系列实验Denial of Service & Insecure Communication

    WebGoat系列实验Denial of Service & Insecure Communication ZipBomb 服务器仅接收ZIP文件,将上传的文件解压,进行操作之后删除.已知服务 ...