div的横向与纵向排列，<div>里的<div>居中

AvBoss · 发表于 2022-10-24 00:38:08

<div>
  <div style="float:left">aaaaaaaaaaaaaa</div>
  <div style="float:left">bbbbbbbbbbbbbb</div>
以上这两个div就是横向排列。
  <div style="clear:both"></div>这个东西很重要，它清除上两个层的浮动，也就是说以下的层就继续垂直排列了。
  <div>这个层就垂直排列了</div>
<div>这个层就垂直排列了</div>
</div>

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

2.使用padding设置对象的上下左右边距
padding-left: 36pt;
padding-right: 36pt;
padding-top: 36pt;
padding-bottom: 36pt;
例子：
<div style=" 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; 740px">

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

AvBoss · 发表于 2022-10-24 00:54:27

ul标签横向排列

<ul>
<li style="float: left; list-style-type:none; width: 200px; height: 200px; background-color: red">
</li>
<li style="float: left; list-style-type:none; width: 200px; height: 200px; background-color: green">
</li>
<li style="float: left; list-style-type:none; width: 200px; height: 200px; background-color: yellow">
</li>
</ul>

复制代码

		自动登录	找回密码
密码			立即注册

div的横向与纵向排列，<div>里的<div>居中

相关帖子