/css-layout

CSS layout samples

Primary LanguageHTML

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。