css并列布局有哪些方法,尽可能全一点,并说明优劣点。

html-css013

css并列布局有哪些方法,尽可能全一点,并说明优劣点。,第1张

要想并列有三种写法:

浮动。float:left要设置父元素高度或者设置overflow:hidden否则会出现高度塌陷

定位。position:absolute设置父元素position:relative,子元素为absolute,通过top和left调整每个子元素相对于父元素的位置

改变div模块,将并列的div设置为display:inline-block;这样每个元素都一排了

如果并列1和3用的很多,设置简单,效果明显,2这种一般情况是不会用的,设置需要调整每个元素的top和left,麻烦费事。1和3根据不同情况可以自由选择。

使多个div并列一行的方法是将div的css样式设知定为浮动方式:float:left或者是设定为inline-block行内块元道素【ie6下设置为inline行内元素已保证兼容性】。版

前提是几个div宽度总和不能超出父元素的宽度。

<div

class="d1

clearfix">

<div

class="d1-1"></div>

<div

class="d1-2"></div>

<div

class="d1-3"></div>

</div>

css:

.d1{

width:1200px

margin:0

auto

overflow:hidden}

.d1

div{

float:left/*将块元素div设定权为左浮动*//*display:inline-block

_display:inline*/

width:400px

height:150px

background:#ccc}

css如何让三个div并排展示,其实就是设置一个浮动点,让三个div靠左或者靠右浮动;

主要标签用于:float:left(靠左对齐)float:right(靠右对齐):示例如下:

1、首先打开用到的编辑工具这里用DW

2、为了方便观察,我们把三个div设置三个背景颜色来观察,设置三个div样式这里取名:div1 div2 div3 并且引用三个样式;

详解:background:#颜色;是取的三个不同的div背景颜色;给三个div设置宽度为width:300px高度height:200px

3、展示出来的效果如图: