css中 怎么设置div 相对位置后,又不占位置的

html-css021

css中 怎么设置div 相对位置后,又不占位置的,第1张

设置div 相对位置后你可以将它邻近的盒子设置成relative相对定位,不脱标准。然后在里面加上这个盒子

#box_relative {

  position: absolute

  left: 30px

  top: 20px

}

昨天在公司进行一个盒子布局的时候,想让多个div处于同一条水平线上的时候,发现点小问题:

情形: 设置父Div为固定宽高,父Div中嵌套两个子Div,分别继承父Div宽度的20%和80%,按道理设置 display:inline-block 会处于同一水平线上;

在这里发现点小问题就是设置display之后,两个子div它 不会排在同一条水平线上,会把第二个盒子挤下来

其实是很郁闷的,不知道这里是为什么反正就是不能在同一条水平线上,然后百度什么的,说是不同盒子之间的存在margin和padding,但是我看盒子的margin和padding也没有啊,如下:

在初始化所有标签的margin和padding的同时设置 font-size: 0

各位大大知道为什么这样可以操作的可以私信,也可戳我邮箱 zhouminghang@baosight.com

使用浮动的话就不会存在上面的问题,直接就在同一水平线上了;

需要注意的是:浮动之后块级元素的display属性已经发生了改变;

这是我自己总结的几种关于 清除浮动 的方法,仅供参考--->清除浮动的方法请戳这里

定位的方法很简单,就不说了,基本上就是设置 父元素 为相对定位 postition: relative , 然后设置 子元素 为 绝对定位 position: absolute 再然后就是设置 top和left 的位置值了;

这里不建议使用定位的方法,定位使用多了, 整个页面结构看起来会很乱的