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。