Two-column adaptation

There are many ways to adapt two-column layouts

1. Floating

This practice, need to give each div floating to a width, compared to the rigid, the following is the display effect,

2. Use Display:inline-block;

This way, you will face Display:inline-block compatibility play problem, in addition, you have to solve the problem of two rows of block spacing, you have to set font-size:0; (Address: http://www.jb51.net/css/76707.html)

The effect is as follows:

3. Using positioning position

Using positioning to do, you will think of two methods, the first is:

. Left {    0;}. Right {    0;}

This has a problem, the height of the parent can not be self-adaptive, sometimes not fixed width.

The second method: one location, the other with margin

The effect is the same:

At this time, you will find that the right side of this I can not need to set its width, only need to setup padding,margin. In particular, the response is not required to change the two columns, this method is to save a lot of things

In addition, you will notice a point, I use floating can also on one, left floating or right floating, the principle is the same, I will not be cumbersome.

Two-column adaptation