、

每个间隙都是20px

                                 <div class="action-content pd10" style="">

                                    <div class="pd10" style="height: 100%;width: 50%;float: left;box-sizing: border-box;">

                                        <div style="border:1px dashed indigo;height: 100%;width: 100%;"></div>

                                    </div>

                                    <div class="pd10" style="height: 30%;width: 50%;float: left;box-sizing: border-box;">

                                        <div style="border:1px dashed indigo;height: 100%;width: 100%;"></div>

                                    </div>

                                    <div class="pd10" style="height: 70%;width: 50%;float: left;box-sizing: border-box;">

                                        <div style="border:1px dashed indigo;height: 100%;width: 100%;"></div>

                                    </div>

                                </div>

pd10 对应padding:10px;

使用padding和float处理带有间隙的多块布局的更多相关文章

  1. 89组合margin、padding、float、clear问题

    有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...

  2. padding 和 float属性

    padding = {上内,右内,下内,左内} 内边距 padding:"10, 5,15,20" float = "true"  控件固定住.

  3. margin和 padding 以及 float :left和float :right的介绍

    1.margin和padding的介绍 margin是外边距,padding是内边距,用CSS时首先要做的就是把所有标签的margin和padding清空.这样更容易控制布局和兼容浏览器. p li等 ...

  4. QWidget添加带有图片的QPushButton，布局QGridLayout

    QWidget* w = new QWidget(this); w->setGeometry(10,20,400,300); QVBoxLayout* layout = new QVBoxLay ...

  5. 功能强大的HTML

    HTML基本标签(一) 1.什么是HTML html:Hyper TextMakeup language:超文本标记语言 html:网页的“源码” 浏览器:“解释和执行”html源码的工具 2.网页的 ...

  6. <ul>标签设计简单导航栏

    当我们刚开始学习html/css的时候,对于padding .float.行内元素.块级元素用起来可能会混淆,但是呢我们可以通过一个简单的nav案例来清楚各自具体作用. 1.首先我们创建一个大的容器, ...

  7. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  8. CSS 去掉inline-block元素间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  9. 比float更好的页面布局inline-block

    一:页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说 ...

随机推荐

  1. Python mongoHelper模块

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- ''' Defines a MongoOperator class and allows you to m ...

  2. Thinkphp学习笔记-模板主题

    一个模块如果需要支持多套模板文件的话,就可以使用模板主题功能. 默认情况下,没有开启模板主题功能,如果需要开启,设置 DEFAULT_THEME 参数即可: // 设置默认的模板主题 'DEFAULT ...

  3. 红帽RHOP 8 发布一条龙方案

    导读 日前,Canonical的Ubuntu在OpenStack的云系统方面处于业界领先地位.其他诸如IBM类顶级科技公司也有意加入OpenStack的混战,新的专用OpenStack公司(例如Mir ...

  4. Ubuntu 中/etc/resolv.conf 文件修改丢失的解决方案

    方法一 1.需要创建一个文件/etc/resolvconf/resolv.conf.d/tail sudo vi /etc/resolvconf/resolv.conf.d/tail 2.在该文件中写 ...

  5. STL - C++ 11的Lambda表达式(下)

    关于lambda的基础知识,请参考上一篇的地址如下: http://www.cnblogs.com/davidgu/p/4825625.html 我们再举个STL使用Lambda来进行排序的例子,如下 ...

  6. git fatal: https://github.com/TeaCodie/TeaCodie-Website.git/info/refs not found: did you run git update-server-info on the server 错误

    错误: fatal: https://github.com/TeaCodie/TeaCodie-Website.git/info/refs not found: did you run git upd ...

  7. C 语言-HelloWorld

    C 语言-HelloWorld C 语言是一种通用的.面向过程式的计算机程序设计语言.1972 年,为了移植与开发 UNIX 操作系统,丹尼斯·里奇在贝尔电话实验室设计开发了 C 语言. C 语言是一 ...

  8. 如何修改浏览器默认的alert样式？

    window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = &qu ...

  9. 关于GridView Master-Detail 不支持明细属性为IEnumerable、IList问题

    默认状态下gridview不支持接口集合,即不支持属性类型为IEnumerable<T>或者扩展的IList<T>,只能乖乖的转成List等实体集合,这种取舍就是鱼和熊掌了,如 ...

  10. Spring Boot 概念知识

    转 http://rapharino.com/coder/Spring-Boot-Induction/ Spring Boot Induction 发表于 2016-10-29   |   分类于 c ...