CSS layout

CSS layout samples

Layout List

Two Columns Layout
- via float
- via negative margin
- via flexbox
Three Columns Layout
- via negative margin
- via flexbox
CSS Center Layout
- Text
  - Single Line
  - Multiple Lines
- Block
  - Inline Block
  - Block

Demo

Two Columns Layout

Three Columns Layout

CSS Center - Text

CSS Center - block

Compatibility

float： IE6+, Firefox 2+, Chrome 1+ etc;
negative margin: IE6+, Firefox 2+, Chrome 1+ etc;
flex： Till 2017-3-28:

Suggestion

Two columns in PC-side —— float;
Three columns in PC-side —— margin;
Mobile application —— flex。