1.多个div使用会自动换行,应该使用float属性
  left :  对象浮在左边
  right :  对象浮在右边
例如:
  float: left  和 float: right 是两个div左右排列在同一行
<div style="width: 20%; float: left; height: 100%">图片</div>
<div style="width: 50%; float: right; height: 100%">图片</div>

2.使用padding设置对象的上下左右边距
 padding-left: 36pt;
 padding-right: 36pt;
 padding-top: 36pt;
 padding-bottom: 36pt;
例子:
<div style="width: 20%; float: left; height: 100%;padding-left: 36pt;">图片</div>

3.div中使用text-align : left | right | center | justify  ,调整包含内容的位置
参数:
left :  左对齐
right :  右对齐
center :  居中
justify :  两端对齐
说明:
设置或检索【对象中文本的】对齐方式。
例子:
<div style="text-align: right">一些超链接</div>

4.div使用vertical-align调整内部元素的垂直方向位置
vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
 参数:
baseline :  将支持valign特性的对象的内容与基线对齐
sub :  垂直对齐文本的下标
super :  垂直对齐文本的上标
top :  将支持valign特性的对象的内容与对象顶端对齐
text-top :  将支持valign特性的对象的文本与对象顶端对齐【常用】
middle :  将支持valign特性的对象的内容与对象中部对齐
bottom :  将支持valign特性的对象的文本与对象底端对齐
text-bottom :  将支持valign特性的对象的文本与对象顶端对齐
例子:
vertical-align : center;

5.div中使用margin-top、margin-bottom、margin-left、margin-right检索或设置对象四边的外延边距。
(1)margin:如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
示例: 
body { margin: 36pt 24pt 36pt; }
body { margin: 11.5%; }
body { margin: 10% 10% 10% 10%; }
<div style="margin: 32px 0px; height: 220px; width: 740px">

(2)margin-top、margin-bottom、margin-left、margin-right
例子:
<div style="margin-top: 12px; height: 25px" id="div_password">

转载于:https://www.cnblogs.com/qqzy168/archive/2012/08/31/2665122.html

div样式调整.txt相关推荐

  1. 实现div可以调整高度(div实现resize)

    实现div可以调整高度(div实现resize) 一.div 实现resize(类似textarea) 代码如下: <!DOCTYPE html> <html><head ...

  2. H5页面rem兼容适配及华为样式调整

    H5页面rem兼容适配 $(document).ready(function(){//rem兼容var winW = $(window).width();var constant = winW/6.4 ...

  3. Element UI Table表格样式调整

    调整Element UI Table表格的样式 最终效果: 单元格合并,样式调整 模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...

  4. 工作218:页面样式调整

    <div class="table-list-page"><div class="query-area"><!--样式控制全部 已 ...

  5. jquery 检测div宽度变化_jquery判断浏览器宽度小于指定值改变div样式

    浏览器原本样式 当浏览器宽度小于1200px时样式变为 代码如下: 方法一:直接修改该div样式添加w1200,会覆盖前一个样式 $(function(){ var _width = $(window ...

  6. 第97篇学生端样式调整及不检测摄像头(一)

    关键词:学生端样式调整, 不检测摄像头 一.学生端样式调整 1.1 现在学生端样式如下: 1)把学生端new_白板_s隐藏 代码如下: <buttonid="btn-getDataUR ...

  7. html网易云客堂,网易云课堂 HTML5 播放器样式调整

    网易云课堂 HTML5 播放器样式调整是一款由作者黄盐分享的一个浏览器扩展插件.通过脚本用户可以配合[视频站启用html5播放器使用],播放器不会出现滚动条,并且有控制按钮,有需要的用户欢迎下载使用体 ...

  8. Python利用xlsxwriter实现对Excel写入数据的样式调整(字体,居中等)

    声明:参考大佬文章 参考网上资料发现很少有用xlsxwriter实现用Python对Excel写入数据的同时进行字体样式调整操作的,因为我用的也是xlsxwriter,所以查找总结了一个用xlsxwr ...

  9. Android AlertDialog样式调整

    Dialog样式调整 安卓封装的AlertDialog是非常好用的一个dialog,满足平时开发中的大部分工作. 但是毕竟开发中,dialog的样式必须要和app主题相符合,这就需要修改dialog的 ...

最新文章

  1. python执行mysql多个sql语句_mysql -- 一次执行多条sql语句
  2. 和quot;分别是什么?
  3. 位运算判断奇偶数_位运算符判断奇偶
  4. 一致性hash算法虚拟节点_一致性 Hash 算法
  5. 简单的jQuery获取URL的?后带的参数
  6. C语言通过枚举网卡,API接口可查看man 7 netdevice--获取接口IP地址
  7. Linux字符设备和块设备的区别
  8. 使用python生成 gif 格式的动图
  9. Python实现数据技术|爬虫便可获取免费百度文库付费文档
  10. Normalized Gini Coefficient
  11. MATLAB绘制B样条曲线
  12. 不懂APS系统?十个问答让你瞬间了解APS高级计划与排程系统
  13. 正在更新office 请稍后... 解决办法
  14. [机器学习] 树模型(xgboost,lightgbm)特征重要性原理总结
  15. Llinux装逼命令大全
  16. 充电桩云平台-一站式运营服务平台
  17. linux内核怎么配置cpu为arm
  18. 有了内网穿透神器 ngrok ,个人电脑也能做服务器
  19. xcode无法打印崩溃信息以及 乱打无效日志
  20. 计算机电源线上的整流器,开关电源的输入输出滤波设计

热门文章

  1. 应用量化时代 | 微服务架构的服务治理之路
  2. 被七牛云OSS对象存储测试域名回收后正确数据迁移姿势!
  3. PHP7 JIT 相关开源项目(JPHP)
  4. Python 学习笔记 -- 继承与多态(入门级实例)
  5. 【MVC】ASP.Net MVC 4项目升级MVC 5的方法
  6. 网络优化正在从经验型优化向大数据关联分析优化转变
  7. linux下的QQ执行玩法:pidgin-lwqq
  8. JavaScript ES2015
  9. 终极解决方案:Emacs+Slime+Lisp启动错误:Polling /tmp/slime.50
  10. SCCM2012R2七:msi软件分发和卸载