Columns - CSS-Tricks

Trang chủ » Html Flow Text Into Two Columns » Columns - CSS-Tricks

Có thể bạn quan tâm

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

.intro { columns: 300px 2; }

The columns property will accept column-count, column-width, or both properties.

columns: || ;

Using both column-count and column-width is recommended to create a flexible multi-column layout. The column-count will act as the maximum number of columns, while the column-width will dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.

A multi-column layout works great on block elements including lists to make a flexible navigation.

To further fine tune your multi-column layout, use break-inside on specific elements to keep them from getting stuck between columns.

  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-span
  • column-width
  • break-inside

More information

  • CSS Multi-column Layout Module Level 1 (Working Draft)
  • MDN Documention

Browser support

IEEdgeFirefoxChromeSafariOpera
10+All9+50+All11.5+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAllAllAllAll

Từ khóa » Html Flow Text Into Two Columns