div怎么固定布局
div布局可以说是时下前端最流行的一种布局,那么怎么固定这个布局呢?通过本文,相信你会有所了解
操作方法
- 01
首先,先建立一个html文件,并在sublime中打开。
- 02
接下来定义三个div分别为first、second、third,并分别给这三个div一个尺寸。
- 03
可以看到second、third两个div不在一行上,如果我们要让他们在一行上该怎么做呢? 很简单,再定义一个div为middle,限制住他们两个。并给second、third两个div设置浮动。
- 04
接下来,框的尺寸定好了,我们来确定它们之间的相对位置。定位置的方式有两种,一种是通过比例来确定位置,一种则是通过像素来确定位置,但由于现在电脑屏幕的尺寸不尽相同,所以通过比例来确定位置兼容性比较好。 设置first div距左端15%,middle也是。
- 05
x方向的位置定好了,我们来定y方向上的位置,设置middle距first为20个像素。这几个div的位置就被固定好啦!
- 06
最后,我们做一些修饰。
赞 (0)