使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右 居中 靠左对齐介绍篇)

实现DIV对齐用到关键属性有两个,一个为float一个为margin。

第一个float,可以让你div层居左居右对齐,另外一个margin实现div盒子居中对齐。

接下来DIVCSS5使用分别实例介绍DIV布局对齐。

为了过程DIV对齐变化,DIVCSS5设置3个DIV盒子,分别CSS 命名为“.divcss5-left”、“.divcss5-right”、“.divcss5-cent”,同时设置三者宽度、高度、边框相同属性。

三者相同样式CSS代码:

width:250px; height:50px; border:1px solid #F00

一、div css布局之div左对齐   -   TOP

1、div左对齐条件与方法

只需要对要靠左对齐(局左)的div样式加float:left即可。

2、DIV+CSS布局完整代码:

html>

div对齐实例 在线演示 DIVCSS5

.divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00}

此DIV靠左对齐显示

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐