、

每个间隙都是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. VS2012利用Wix打包问题

    在用VS2012打包的时候,忽然发现没有像VS2010一样可以本地打包的项目模板,于是找了N多资料后,发现现在微软在推荐用WIX打包. 在折腾WIX打包生成界面的时候,遇到了一个很纠结的问题. Unr ...

  2. magento 12 配置安装教程

    Magento (麦进斗) 是一套专业开源的电子商务系统.Magento设计得非常灵活,具有模块化架构体系和丰富的功能.易于与第三方应用系统无缝集成.其面向企业级应用,可处理各方面的需求,以及建设一个 ...

  3. [AngularJS] Angular1.3 ngAria - 1

    Accessibility is an often overlooked essential feature of a web application. a11y Is a critical comp ...

  4. Linux ${} 变量内容的提取和替换功能等

    [root@localhost log]# var=/dir1/dir2/file.txt 1.对变量取值 [root@localhost log]# echo ${var} /dir1/dir2/f ...

  5. APNS 生成证书 p12 或者 PEM

    .net环境下须要p12文件,下面是生成p12过程 1.$ openssl x509 -in aps_development.cer -inform der -out PushChatCert.pem ...

  6. 算法笔记_041:寻找和为定值的多个数（Java）

    目录 1 问题描述 2 解决方案 1 问题描述 输入两个整数n和sum,要求从数列1,2,3,...,n中随意取出几个数,使得它们的和等于sum,请将其中所有可能的组合列出来. 2 解决方案 上述问题 ...

  7. javascript 获取页面尺寸/位置

    ************************************************************************//ie中如果全部不给定值则会都为零(宽和高在设置一个的 ...

  8. 【windows7】解决IIS 80端口占用问题（亲测）

    1.默认你win机器已经安装并启用了80端口 2.现在你要安装并启用apache服务器 3.首先进行80端口占用检测:netstat -aon|findstr 80 4.找到进程号为404的服务名称, ...

  9. php后台“爬虫”模拟登录第三方系统

    http://blog.csdn.net/liu_c_y/article/details/49956679 http://www.php100.com/html/webkaifa/PHP/PHPyin ...

  10. Android中 单位 介绍

    看到有很多网友不太理解dp.sp和px的区别:现在这里介绍一下dp和sp.dp也就是dip.这个和sp基本类似.如果设置表示长度.高度等属性时可以使用dp 或sp.但如果设置字体,需要使用sp.dp是 ...