Колоне - ЦСС-трикови

Anonim

Уз само неколико ЦСС правила можете створити изглед инспирисан штампањем који има флексибилност Веба. То је као да узимате новине, али како се папир смањује, колоне се аутоматски прилагођавају и уравнотежују омогућавајући садржају природни проток.

.intro ( columns: 300px 2; )

columnsИмовина ће прихватити column-count, column-widthили оба својства.

columns: || ;

Коришћење обе верзије column-countи column-widthпрепоручује се за стварање флексибилног изгледа са више колона. Воља column-countће деловати као максималан број колона, док ће column-widthвоља диктирати минималну ширину сваке колоне. Повлачењем ових својстава, изглед више ступаца аутоматски ће се разбити у један ступац на уским ширинама прегледача без потребе за медијским упитима или другим правилима.

Изглед са више колона одлично функционира на елементима блокова, укључујући листе, како би се створила флексибилна навигација.

Да бисте даље фино подесили распоред са више колона, користите break-insideодређене елементе како бисте спречили да се заглаве између ступаца.

Више информација

  • ЦСС модул распореда са више колона ниво 1 (радни нацрт)
  • МДН документација

Подршка прегледача

ИЕ Ивица Фирефок Хром Сафари Опера
10+ Све 9+ 50+ Све 11.5+
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари Опера Мобиле
Све Све Све Све Све