https://github.com/ulivz/css-layout

CSS layout samples
https://github.com/ulivz/css-layout

css css-layout layout

Last synced: 6 months ago
JSON representation

CSS layout samples

• Host: GitHub
• URL: https://github.com/ulivz/css-layout
• Owner: ulivz
• Created: 2017-03-27T16:53:46.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-30T06:45:19.000Z (over 8 years ago)
• Last Synced: 2025-02-01T23:12:48.439Z (8 months ago)
• Topics: css, css-layout, layout
• Language: HTML
• Homepage:
• Size: 4.66 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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`。