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

html-css014

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根据不同情况可以自由选择。

比如

.s1{样式}

.s2{样式}

.s3{样式}

<div class="s1 s2 s3"

以上不就并列了啊。要是这样情况,有冲突定义,以后者为准,要是都没有,样式全生效。

想要让多个div元素并列成一行,可以将div元素的float属性设置为left。但这样做还不够,应为当浏

览器的宽度小于这几个div的宽度总和时还是会有div会跑到底部,所以需要将想要并列的div元素套

在另外一个大div里,当然,这个大div宽度要大于并排div宽度的总和。这样子,就可以做到怎么变

换窗口大小时div都不会跑到下面了。

以下是具体演示步骤:

1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。

2、在body标签里添加一个大div来容纳并列的div。

3、在大div里添加想要并列的div元素,并在style属性里添加float:left即可

4、运行效果。