Horizontal Alignment of two elements

 

There are three solutions:

1. Use float

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

The effect is as follows:

123

456

 

Float can be used for horizontal alignment of the two elements, but the height of the element outside is zero at this time.

 

. 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 */

You only need to add the. Clearfix class to the parent Div.

2. Use "display: inline-block" for the elements in the inline block-level elements to set their height and width. However, it may still seem wrong. You only need to add vertical-align: Top; To horizontally align.

 

3. The parent element uses relative positioning, and the child element uses absolute positioning.