div+css中左对齐

html-css021

div+css中左对齐,第1张

div+css左对齐分两种情况一种是:文字左对齐;另一种是区域块儿设置浮动,让他们往左浮动,而实现出来的效果即是左对齐;如下演示:

1、文字实现居左对齐

网页中实现效果:如下图

详解:主要属性:text-align:left使文字实现居左对齐   

扩展:text-align:right使文字靠右对齐,center文字居中;

2、区域块儿设置浮动实现居左对齐;div+css如下

网页中效果图:如下

详解:设置一个大的区域nav,里面包含两个部分区域块,nav1与nav2,使他们在nav中靠左浮动;主要标签:float:left靠左浮动;

扩展:float:right靠右浮动;而与之相关标签: clear:both则是去除左右浮动; clear:left去除左浮动 clear:right清除右浮动

div默认是居左靠上的,你说的缝隙应该是由于body的默认CSS属性没有被清除造成的,你可以在CSS里写上 body {margin:0padding:0} ,这样处于body里的div就靠左无缝隙了。

1、居左:

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

示例代码:

css部分:

<style>

.divcss5-left{float:leftwidth:250pxheight:50pxborder:1px solid #F00}

</style>

HTML部分:

<div class="divcss5-left">此DIV靠左对齐显示</div>

2、居右:

对要靠右对齐(局右)的div样式加float:right。

示例代码:

css部分:

<style>

.divcss5-right{float:leftwidth:250pxheight:50pxborder:1px solid #F00}

</style>

HTML部分:

<div class="divcss5-right">此DIV靠右对齐显示</div>

3、居中:

对要居中对齐的div样式加margin:0 auto,不再需要加float样式。

示例代码:

css部分:

<style>

.divcss5-cent{margin:0 autowidth:250pxheight:50pxborder:1px solid #F00}

</style>

<div class="divcss5-cent">此DIV居中右对齐显示</div>

扩展资料:

CSS清除浮动:

浮动:因为使用了float:left或float:right或两者都是有了而产生的浮动。

对父级设置适合CSS高度:

对父级设置适合高度样式清除浮动,一般设置高度需要能确定内容高度才能设置。

示例代码:

css部分:

.divcss5{ width:400pxborder:1px solid #F00background:#FF0 height:102px}

.divcss5-left,.divcss5-right{width:180pxheight:100px

border:1px solid #00Fbackground:#FFF}

divcss5-left{ float:left}

.divcss5-right{ float:right}

HTML部分:

<div class="divcss5">

<div class="divcss5-left">left浮动</div>

<div class="divcss5-right">right浮动</div>

</div>