Display:table-cell

Layout Artifact Display:table-cell

First case:

In the previous layout I will use float to achieve, but it triggers more problems. For example, to clear the float, the element floats out of the document flow, but sometimes can not use the float layout. In other words, it combines the characteristics of both the inline and the block, and simply says that the element that sets the Inline-block property has the properties of the block element that can set the width and height, It also preserves the inline element's non-wrapping characteristics.

Ab

Demo

A second case:

The case I used to like most before was the bootstrap grid system. A raster system is used to create a page layout with a series of rows and columns (column), and your content can be placed in these created layouts. But at the same time the grid system also has shortcomings, once more than 12 elements will fall down.

• 1
• 2
• 3
• 4

Demo

Display:table-cell