让两个元素水平对齐

 

解决方法有三个：

1. 使用 float

<div>
    <div>123</div>
    <div>456</div>
</div>

此时的效果是：

123

456

 

让这两个元素水平对齐，可以使用float；但是这时候外面元素高度为零。

 

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

　只需要在父这个div上加入 .clearfix 这个类

2。对里面的元素使用display:inline-block;这样变成了内联块级元素，设置他们的高度和宽度。但是可能会看起来还是不对其。只需要加上 vertical-align:top；就能够水平对齐了。

 

3。 父元素 使用相对定位，子元素使用绝对定位。

转载于:https://www.cnblogs.com/fyydnz/p/3847958.html