কিভাবে তৈরি করা: দাগ সাজুকরণ
CSS দিয়ে দাগ সাজুকরণ তৈরি করতে শিখুন。
| Firstname | Lastname | বয়স |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Firstname | Lastname | বয়স |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
কিভাবে দাগ সাজুকরণ
কিভাবে CSS float দাগ সাজুকরণ তৈরি করতে:
উদাহরণ
* {
box-sizing: border-box;
}
/* দুটি স্তম্ভ সাজুকরণ তৈরি করুন */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix（ভেঙ্গে ফেলা） */
.row::after {
content: "";
clear: both;
display: table;
}
কিভাবে CSS flex দাগ সাজুকরণ তৈরি করতে:
উদাহরণ
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
প্রত্যাহার:Flexbox IE10 এবং তার আগের সংস্করণে সমর্থিত নয়। কি ব্যবহার করবেন? float বা flex আপনার নির্বাচন অনুযায়ী। কিন্তু, আপনি IE10 এবং তার আগের সংস্করণগুলির সমর্থন করতে হলে, float。
টীকা:ফ্লেক্সিবল বক্স বুক্স মডিউল সম্পর্কে আরও বিস্তারিত জানতে, আমাদের CSS Flexbox শিক্ষাদত্ত্র。
প্রতিক্রিয়তা যোগ করুন
উপরোক্ত উদাহরণটি মোবাইল ডিভাইসে অত্যন্ত সুন্দর না হবে, কারণ দুটি স্তম্ভটি পৃষ্ঠায় বেশি জায়গা দখল করবে。
প্রতিক্রিয় টেবিল তৈরির জন্য, তাকে দুটি স্তম্ভ সাজুকরণ থেকে মোবাইল ডিভাইসের সম্পূর্ণ পজিটিভ সাজুকরণে রূপান্তরিত করতে, নিচের মিডিয়া কোয়াইয়ার যোগ করুন:
উদাহরণ
/* প্রতিক্রিয় সাজুকরণ - 600 পিক্সেলের নিচের স্ক্রিনে, দুটি স্তম্ভকে স্থানান্তরিত করুন, না পারালোক করুন */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
সংশ্লিষ্ট পৃষ্ঠা
教程：CSS 浮动
