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.
Related properties
- 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
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10+ | All | 9+ | 50+ | All | 11.5+ |
Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
---|---|---|---|---|
All | All | All | All | All |
Từ khóa » Html Css 2 Columns Width
-
How To Create A Two Column Layout - W3Schools
-
CSS Multiple Columns - W3Schools
-
CSS Multi-column Layout - CSS: Cascading Style Sheets | MDN
-
Column-width - CSS: Cascading Style Sheets - MDN Web Docs
-
How To Create Columns In HTML
-
Automatic Width Of A Column In A Two Column Layout - Stack Overflow
-
2 Column Div Layout: Right Column With Fixed Width, Left Fluid
-
How To Create A Responsive Two Column Layout In HTML And CSS
-
Multi-column Layout In CSS
-
Ridiculously Easy Row And Column Layouts With Flexbox
-
Grid System - Bootstrap
-
CSS Layout Create 2 Column Layout, First Column Fixed Width, 100 ...
-
CSS Layout Techniques | Comm244 Notes
-
When And How To Use CSS Multi-Column Layout