CSS盒子布局-设置inline-block不能在排一行

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

一. 让块级元素处于同一条水平线上的做法：

---

No.1 设置display：inline-block属性

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

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

代码如下：

首先已经把所有的magin、padding全部初始化为0，但是还是不能在同一条水平线上，效果图如下：

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

• firstChild_div

• secondChild_div

1.2 解决方案:

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

* {
     margin: 0;
     padding: 0;
     font-size: 0;
}

• 如果你设置的css样式的value值包含 数值加单位的，如果数值为 0，建议把 单位省略掉；

效果如下：

各位大大知道为什么这样可以操作的可以私信，也可戳我邮箱[email protected]

---

No2. 使用浮动

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

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

• html：

• 效果图

2.2 设置浮动之后要记得清除浮动

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

---

No.3 设置定位

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

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

---

应该还有其他的方法，暂时就想到了这三种方法了，待续...