خاصية تعبئة عمود CSS

حدد كيفية تعبئة الأعمدة:

.newspaper1 {
column-fill: auto;
}

.newspaper2 {
column-fill: balance;
}

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

column-fillتحدد الخاصية كيفية تعبئة الأعمدة ، متوازنة أم لا .

تلميح: إذا أضفت ارتفاعًا إلى عنصر متعدد الأعمدة ، فيمكنك التحكم في كيفية تعبئة المحتوى للأعمدة. يمكن موازنة المحتوى أو ملؤه بالتسلسل.

القيمة الافتراضية:	الرصيد
وارث:	رقم
متحرك:	رقم. اقرأ عن animatable
الإصدار:	CSS3
بناء جملة JavaScript:	الكائن .style.columnFill = "تلقائي"

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

الأرقام متبوعة بـ -moz- تحدد الإصدار الأول الذي يعمل بالبادئة.

Property
column-fill	50.0	10.0	52.0 13.0 -moz-	10.0 7.0 -webkit-	37.0

column-fill: balance|auto|initial|inherit;

Value	Description
balance	Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally)
auto	Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

قسّم النص في عنصر <div> إلى ثلاثة أعمدة:

div {
column-count: 3;
}

حدد فجوة 40 بكسل بين الأعمدة:

div {
column-gap: 40px;
}

حدد عرض القاعدة ونمطها ولونها بين الأعمدة:

div {
column-rule: 4px double #ff00ff;
}