有的时候，我们需要使独占一行的两个div能够在一行和谐共处，解决方案大概有两种：
1.为两个div均添加display:line-block属性
2.将两个div都设成浮动的元素
这篇文章将深入探讨二者的区别与联系，此外，还将会带给大家一种垂直居中的新方式
我们将以下面的代码作为演示代码，这意味着每当我们讨论一个新问题时就要把代码恢复成下面这个样子：
CSS样式：
<style>
.myContainer{
width: 500px;
margin: 20px auto;
background-color: gray;
overflow: hidden;
.div1{
width: 200px;
height: 100px;
background-color: red;
.div2{
width: 200px;
height: 100px;
background-color: aqua; }
</style>
html内容：
<div class="myContainer">
<div class="div1"></div>
<div class="div2"></div>
<div class="myContainer">
<div class="div1"></div>
<div class="div2"></div>
运行后的效果：
会发现在两个div的高度不同时，两种方式的对齐效果也不相同：
（1）display:inlne-block属性修饰的元素没有脱离文档流，当然会与在正常的文档流中的元素一样采取的底端对齐方式。
（2）float属性修饰的元素在一定程度上脱离了普通文档流的限制，只用考虑向某个方向浮动，所以会产生如图的效果。
使用display:inlne-block的好处在于我们可以通过一个叫做vertical-align的属性来控制两个元素的对齐方式：
（1）我们为前两个div分别添加一个属性：vertical-align:middle
<div class="myContainer">
<div class="div1" style="display: inline-block;vertical-align: middle">
<div class="div2" style="display: inline-block;vertical-align: middle">
查看一下运行效果：（这里我省去了后两个浮动元素的截图）
3.括展：垂直居中的新方式：
会思考的朋友会想到利用这种方式可以实现子div在父div内的垂直居中。原理很简单，在父div内设置两个子div：div1,div2,其中div1是我们要垂直居中的元素,div2是辅助元素。我们让div2的宽度为0，高度为父div的高度，然后将div1和div2都加上display:inline-block和vertical-align:middle。之后，便可实现垂直居中。代码如下所示（这里使用text-align:center保证水平居中）：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>垂直居中的新方法</title>
<style>
.myContainer{
width: 500px;
height: 300px;
margin: 10px auto;
background-color: gray;
text-align: center;
.div1{
width: 200px;
height: 100px;
background-color: red;
display: inline-block;
vertical-align: middle
.div2{
width: 0;
height: 100%;
background-color: aqua;
display: inline-block;
vertical-align: middle
</style>
</head>
<div class="myContainer">
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果如图所示：
4.浏览器缩放时的区别
有的时候我们需要在父div的一排内安置两个子div,二者的宽度固定为某个像素，中间空余一定距离。这样也存在有两种方案： （1）两个子div一个向左浮动，一个向右浮动
<div class="myContainer">
<div class="div1" style="float: left">
<div class="div2" style="float: right">
（2）将它们设置为display:inline-block,然后通过margin来设置两者间的距离：
<div class="myContainer"><!--XXX为符合条件的具体值-->
<div class="div1" style="display: inline-block;margin-right: XXXpx">
<div class="div2" style="display: inline-block;">