、

每个间隙都是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. Qt正则表达式提取数据

    这几天在上嵌入式课程设计,需要用到Qt,这个是信号与槽的,寒假的时候也简单学习了一些,但是没有怎么深入,又回过来看了看Qt,发现Qt的ui界面配置与Android的好像,当然Qt也可以拿来开发Andr ...

  2. 【云计算】OpenStack qcow2镜像如何转化为Docker镜像？

    Import qcow2 image to docker hub 参考资料: https://forums.docker.com/t/import-qcow2-image-to-docker-hub/ ...

  3. （剑指Offer）面试题55：字符流中第一个不重复的字符

    题目: 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中读出前 ...

  4. Visual Studio 2012安装VASSISTX插件后导致CPU高的解决的方法

    笔者一直都喜欢用VAX插件来做C++的开发,但发现VS2012安装了VAX后,CPU占用超级高,有时界面卡死得很厉害.我卸了又装,升级最新版,都无论用. 直到有天.看到网友说:VS2012的sdf文件 ...

  5. canvas的api

    Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap).使用前,首先需要新建一个canvas网页元素. 1 2 3 ...

  6. SqlServer字段说明查询及快速查看表结构

    SqlServer字段说明查询 SELECT t.[name] AS 表名,c.[name] AS 字段名,cast(ep.[value] )) AS [字段说明] FROM sys.tables A ...

  7. Android SDK 更新和下载慢怎么办？

    博客搬家:因为各种原因,我如今的博客将首发于blog.mojijs.com, 能够百度搜索 "姜哥的墨迹技术博客" , 或者 点击这里 本文地址 http://blog.mojij ...

  8. vnc/route/ifconfig 配置

    重启网卡的方法: 1 network 利用root帐户 # service network restart ############################################## ...

  9. 【Oracle】新建用户，删除用户，授权

    一.创建用户 oracle内部有两个建好的用户:system和sys.用户可直接登录到system用户以创建其他用户,因为system具有创建别 的用户的 权限. 在安装oracle时,用户或系统管理 ...

  10. mysql-5.7.12-winx64安装版配置、使用

    一.下载 http://dev.mysql.com/downloads/mysql/ 下载版本:Windows (x86,64-bit), ZIP Archive(mysql-5.7.12-winx6 ...