সিএসএস(৩) column-fill প্রোপার্টি

ব্রাউজার সাপোর্ট

property	Google Chrome	Edge	Mozila Firefox	Safari	Opera
column-fill	সাপোর্ট করে না	সাপোর্ট করে না	১৩.০ -moz-	সাপোর্ট করে না	সাপোর্ট করে না

সংজ্ঞা ও ব্যবহার

একটি কলাম কিভাবে পূরণ হবে তা column-fill প্রোপার্টির মাধ্যমে নির্দিষ্ট করা হয়।

Initial Value:	Inherited:	Animatable:
balance	না	না। আরোও জানতে animatable অধ্যায় ভিজিট করুন।

সিএসএস সিনট্যাক্স

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

কিভাবে কলাম পূরন করা যায় তা নির্দিষ্ট করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-fill: auto; /* Chrome, Safari, Opera */
    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
}
.text1 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-fill: balance; /* Chrome, Safari, Opera */
    -moz-column-fill: balance; /* Firefox */
    column-fill: balance;
}
</style>
</head>
<body>

<div class="text">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবেএগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে 
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও 
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ 
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<br><br>

<div class="text1">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে 
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন ওয়েব 
ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও করতে 
পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে 
ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>

</body>
</html>

ফলাফল

জাভাস্ক্রিপ্ট সিনট্যাক্স

object.style.columnFill="auto"

উদাহরণঃ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
#thisDiv {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -moz-column-fill: balance; /* Firefox */
    column-fill: balance;
}
</style>
</head>
<body>

<p>column-fill প্রোপার্টির কাজ দেখার জন্য "ক্লিক করি" বাটনে ক্লিক করুন।</p>

<button onclick="myFunction()">ক্লিক করি</button><br><br>

<div id="thisDiv">
 কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<p><strong>নোটঃ</strong> Column-fill প্রোপার্টিটি শুধুমাত্র ফায়ারফক্স ব্রাউজারেই সাপোর্ট করে।</p>
<script>
function myFunction() {
    document.getElementById("thisDiv").style.MozColumnFill = "auto"; /* Code for Firefox */
    document.getElementById("thisDiv").style.columnFill = "auto";
}
</script>

</body>
</html>

ফলাফল

আরো উদাহরণ

Column-count প্রোপার্টির ব্যবহার

<div> এলিমেন্টের টেক্সট গুলোকে তিনটি কলামে ভাগ করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
</style>
</head>
<body>


<div class="text">
  কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
  ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
  হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
  এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
  ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও 
  করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ 
  বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>

<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সনগুলো column-count প্রোপার্টি
সাপোর্ট করে না।</p>

</body>
</html>

ফলাফল

Column-gap প্রোপার্টির ব্যবহার

একটি <div> এলিমেন্টের ভিতরের টেক্সট গুলোকে তিনটি কলামে ভাগ করা হয়েছে এবং প্রতিটি কলামের মধ্যে 40 pixel করে ফাঁকা রাখা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
</style>
</head>
<body>

<div class="text"> 
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন 
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও 
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ 
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>

<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সনগুলো column-gap প্রোপার্টি 
সাপোর্ট করে না।</p>

</body>
</html>

ফলাফল

Column-rule

কলাম গুলোর মধ্যের রূলের জন্য width, style এবং color নির্দিষ্ট করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue; 
}
</style>
</head>
<body>

<div class="text"> 
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন 
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও 
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ 
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>

<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সনগুলো column-rule প্রোপার্টি 
সাপোর্ট করে না।</p>

</body>
</html>

ফলাফল

column-fill প্রোপার্টির ভ্যালু-সমূহ

balance - ডিফল্ট ভ্যালু যা ব্রাউজারের প্রশস্ততা অনুসারে জায়গা দখল করে।
auto -কলামগুলো ধারাবাহিক ভাবে পূরন হবে এবং এগুলো বিভিন্ন দৈর্ঘ্যের হবে।
initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস রেফারেন্স

CSS Properties

সিএসএস(৩) column-fill প্রোপার্টি

ব্রাউজার সাপোর্ট

সংজ্ঞা ও ব্যবহার

সিএসএস সিনট্যাক্স

উদাহরণ

ফলাফল

জাভাস্ক্রিপ্ট সিনট্যাক্স

উদাহরণঃ

ফলাফল

আরো উদাহরণ

Column-count প্রোপার্টির ব্যবহার

উদাহরণ

ফলাফল

Column-gap প্রোপার্টির ব্যবহার

উদাহরণ

ফলাফল

Column-rule

উদাহরণ

ফলাফল

column-fill প্রোপার্টির ভ্যালু-সমূহ

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য