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">