、

每个间隙都是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. 微软小冰你这么智能 .net知道吗？

  2. Cognos如何开启CJAP认证程序日志

    步骤: 1:修改ipfaaaclientconfig.xml.sample为ipfclientconfig.xml,修改<param name="File" value=&q ...

  3. 使用nmonchart把.nmon文件转换成html

    转载:https://blog.csdn.net/zd470015321/article/details/68923280 我的环境 :centos6.6 下载地址 nmon: http://nmon ...

  4. 根据Ip地址与掩码 得出 子网地址与广播地址

    由于给予条件优先,没有直接给出子网地址与广播地址.但是又需要这两个参数,需要我们使用ip 地址与 子网掩码得出子网地址与广播地址.思路如下:       1. 子网地址, ip地址与 子网掩码分别换算 ...

  5. GIL线程全局锁 协程

    GIL线程全局锁 线程全局锁(Global Interpreter Lock),即Python为了保证线程安全而采取的独立线程运行的限制,说白了就是一个核只能在同一时间运行一个线程.对于io密集型任务 ...

  6. Could not parse the file: d:\matlab7\toolbox\ccslink\ccslink\info.xml

    找到安装目录下的info.xml文件,用记事本打开. 我的安装目录是:D:\MATLAB7\toolbox\ccslink\ccslink 用记事本打开,显示如下内容: <productinfo ...

  7. vue - 路由传递参数

    结构目录 1. 页面传值(不同之间的页面传值) 1.1 index.js配置 源码: // 引入vue框架 import Vue from 'vue' // 引入vue-router路由依赖 impo ...

  8. Linux程序调试GDB——数据查看

    查看栈信息 当程序被停住了,首先要确认的就是程序是在哪儿被断住的.这个一般是通过查看调用栈信息来看的.在gdb中,查看调用栈的命令是backtrace,可以简写为bt. (gdb) bt    #0 ...

  9. ASP.NET总结

    ASP.NET已经学习完.学牛腩的时候面对一些控件和方法会用,但对当中的原理还不懂.学习这部分的内容时, 从头到尾都有一种相识的感觉,把之前一些不懂得地方也理解了,每个知识都有相应的样例练习,学起来还 ...

  10. PHP-流的概念与详细用法

    Stream是PHP开发里最容易被忽视的函数系列(SPL系列,Stream系列,pack函数,封装协议)之一,但其是个很有用也很重要的函数.Stream可以翻译为“流”,在Java里,流是一个很重要的 ...