、

每个间隙都是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. （转）实现AI中LOD优化技术

    LOD(Level Of Detail)是3D渲染中用到的概念,按照wikipedia上的翻译,可以译为“细节层次”,它是一种根据与观察点的距离,来减低物体或者模型的复杂度来提升渲染效率的优化技术,因 ...

  2. Cookie 与 sessonID

    Http协议是无状态的,即服务端仅仅能通过你本次提交的http请求来给出响应. cookie可用于服务端标记client.如登陆过后免输password,购物车实现等. 1.cookie Cookie ...

  3. android 开源组件合集-UI篇(2013-11-07更新)

    其实也算不上合集,只是将我经常用到的部分整理一下,如果您有好东西,也可以留言补充 1.actionbar http://actionbarsherlock.com/ https://github.co ...

  4. 每日算法之二十三：Reverse Nodes in k-Group

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...

  5. 【Linux】mkdir命令

    用途 mkdir命令主要是用来建立目录的 全称 mkdir的全称为:Make Directory 参数 -m :配置文件的权限 -p :帮助你直接将所需要的目录递归建立起来 案例 进入到目录/usr/ ...

  6. 深层神经网络框架的python实现

    概述 本文demo非常适合入门AI与深度学习的同学,从最基础的知识讲起,只要有一点点的高等数学.统计学.矩阵的相关知识,相信大家完全可以看明白.程序的编写不借助任何第三方的深度学习库,从最底层写起. ...

  7. windows+Linux【Composer安装指定版本laravel】

    在windows下安装的方法:(php.ini中openssl.dll扩展必须打开,且版本>=5.4) 方法一:使用安装程序 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运 ...

  8. C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式

    C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...

  9. [Asp.Net]最近一个项目的总结

    引言 项目到目前告一段落,目前进入测试阶段,下周就要去部署了.虽然项目不大,但是从头到尾都是自己一个人负责,在完成编码之后,对代码进行走查,命名规范,业务逻辑,代码优化等,能负责一个项目的整个编码,非 ...

  10. android 实现全屏代码

    设置全屏包括两个部分: 窗口全屏和Activity全屏. 窗口全屏 是指隐藏系统顶部用来显示时间.电量.信号等信息的标题栏 . Activity全屏 是指隐藏程序的标题栏.我们可以通过修改Androi ...