使用padding来合理布局自己的容器类
这两天一直忙着前端UI的事,前端布局这块下了很多工夫,很多第三方布局框架如Bootstrap和layUI等虽然很好使用,但是前端你懂的,实际用起来总得缝缝补补,烦啊。
今天就遇到了一个要让div容器内的元素居中对齐的需求,虽然其他的框架样式也很多,但是不适合我的情况,于是就想办法自己改样式,终于发现了一个方法:就是padding(容器内补)
之前是这样的:
<div class="media" style="border: 1px solid #ddd;">
<div class="media-left pull-left">
<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
</div>
<div class="media-body">
<div>content</div>
</div>
<div class="media-right" >
<div><i class="fa fa-angle-right fa-lg"></i></div>
</div>
</div>
页面是这样的:
最后想起来:干脆自己做个div容器自己加上对应的内补不就好了吗,这样就能自己调整居中位置了。
<div class="media" style="border: 1px solid #ddd;">
<div class="media-left pull-left" style="border: 1px solid red;">
<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
</div>
<div class="media-body" >
<div style="padding: 18px 15px">content</div> //加上padding,让自己的元素在自己的容器内看起来居中,自己的div容器则在bootstrap的容器中自适应,不用关心
</div>
<div class="media-right" style="padding: 18px 15px">
<div><i class="fa fa-angle-right fa-lg"></i></div>
</div>
</div>
最后页面居中了
使用padding来合理布局自己的容器类的更多相关文章
- H5移动前端完美布局之padding
序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padd ...
- Flutter 布局(二)- Padding、Align、Center详解
本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...
- ExtJs4 笔记(14) layout 布局
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- 【ExtJS】 布局Layout
布局用于定义容器如何组织内部子元素和控制子元素的大小. ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局. Containter容器类布局:负责容器内容Extj ...
- 浅谈css的栅格布局
栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- 使用CSS中margin和padding的基础和注意事项
在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- div盒布局
最近在应用程序中内嵌webkit浏览器显示网页,网页的布局是自适应的,采用盒布局模型,能够实现较好的自适应效果. <style> html,body { height: 100%; mar ...
随机推荐
- nginx新的站点的配置
每一次配置新的站点的时候,要记得重新启动nginx: sudo -s; nginx -s reload; 配置文件,有涉及到 每一个站点都有一个.conf文件. 域名重定向:Gas Mask的软件的使 ...
- eclipse调试hadoop2.2.0源码笔记
在hadoop1.x版本时使用的是在Windows下编译Eclipse插件,远程调试集群.换成2.2.0,没有eclipse-plugin文件. hadoop2.2.0"远程调试集群&quo ...
- Centos安装jdk8
1.下载jdk1.8的tar cd /usr/local/src #切换到该目录下 wget url #下载jdk8的tar包 2.下载完成后解压tar包 tar -zxvf jdk-8u152-li ...
- 搬砖的也能学Python----if - elif 语句
引入:如果平时执行的过程超过两个分支,则使用if-elif语句 if-elif 语句结构 if 判断条件: 要执行的代码 elif 判断条件: 要执行的代码 -- else: 要执行的代码 判断条件: ...
- for、for in和while以及do while
for循环:一般用在已知判断条件的循环; for(变量初始化;循环条件判断;循环后的执行){ 代码块 } //变量初始化可以省略,但是分号不能省.有多个的话用逗号隔开 //循环条件判断是true还是f ...
- Netty(二):Netty为啥去掉支持AIO?
匠心零度 转载请注明原创出处,谢谢! 疑惑 我们都知道bio nio 以及nio2(也就是aio),如果不是特别熟悉可以看看我之前写的网络 I/O模型,那么netty为什么还经常看到类似下面的这段代码 ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- AutoAudit研究学习
AutoAudit介绍 AutoAudit这个是Paul Nielsen写的一个开源的审计跟踪的脚本项目,项目位于https://autoaudit.codeplex.com/上,Paul Nie ...
- Flex中的FusionCharts 3D柱形图
1.3D柱形图源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...
- Java之indexOf()方法
Java之indexOf()方法 1.方法介绍 (1)indexOf(int ch) 返回指定字符在此字符串中第一次出现处的索引 (2)indexOf(String str) 返回指定子字符串在此字符 ...