যদি CSS3 একটি বিকল্প হয় তবে এটি CSS calc()
ফাংশনটি ব্যবহার করে করা যেতে পারে ।
মার্কআপ সহজ - কিছু ধারক উপাদানের সাথে একগুচ্ছ ডিভ্স।
সিএসএস এর মতো দেখাচ্ছে:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
যেখানে -9px একটি IE9 + ক্যালক / রাউন্ডিং বাগ ঠিক করতে - এখানে দেখুন
এখানে, calc()
ফাংশন ছাড়াও , media queries
প্রয়োজনীয়।
মূল ধারণাটি হ'ল প্রতিটি # কলামের রাজ্যের জন্য একটি মিডিয়া ক্যোয়ারী সেটআপ করা, যেখানে আমি তখন প্রতিটি উপাদানের মার্জিন-রাইট কাজ করার জন্য ক্যালক () ব্যবহার করি (শেষ কলামে থাকাগুলি বাদে)।
এটি অনেক কাজের মতো শোনাচ্ছে তবে আপনি যদি কম বা SASS ব্যবহার করেন তবে এটি বেশ সহজেই করা যায়
(এটি এখনও নিয়মিত সিএসএস দিয়ে করা যায়, তবে তারপরে আপনাকে সমস্ত গণনা ম্যানুয়ালি করতে হবে এবং তারপরে আপনি যদি নিজের বাক্সের প্রস্থ পরিবর্তন করেন - আপনাকে আবার সমস্ত কিছু করতে হবে)
নীচে কম ব্যবহার করে একটি উদাহরণ দেওয়া হল: (আপনি এই কোডটি এটির সাথে খেলতে এখানে অনুলিপি / পেস্ট করতে পারেন , [এটিও আমি উল্লিখিত ফিডল তৈরি করতে ব্যবহৃত কোডটি]]
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
সুতরাং মূলত আপনাকে প্রথমে বাক্স-প্রস্থ এবং ন্যূনতম মার্জিনটি ঠিক করতে হবে যা আপনি বাক্সগুলির মধ্যে চান।
এটির সাথে, আপনি প্রতিটি রাজ্যের জন্য আপনার কতটা জায়গা প্রয়োজন তা নিয়ে কাজ করতে পারেন।
তারপরে, ডান মার্জিন গণনা করতে ক্যালক () ব্যবহার করুন এবং চতুর্থ কলামের বাক্সগুলি থেকে ডান মার্জিনটি সরাতে নবম সন্তানের ব্যবহার করুন।
সুবিধা গৃহীত উত্তর যা ব্যবহারের উপর এই উত্তরtext-align:justify
2 বক্স চূড়ান্ত সারিতে অবশিষ্ট থাকে তাহলে - আমি: 'সমর্থনযোগ্য' চূড়ান্ত সারি পাবেন না উপর বক্স যেমন - যে আপনি বাক্সে চেয়ে বেশি এক সারি আছে হয় প্রথম বাক্সটি বাম দিকে এবং পরেরটিটি ডানে থাকবে না - বরং বাক্সগুলি একে অপরকে যথাযথ অনুসরণ করে।
সংক্রান্ত ব্রাউজার সমর্থনের এই উপর IE9 + ফায়ারফক্স, ক্রোম, Safari6.0 কাজ করবে - (দেখুন এখানে আরো বিস্তারিত জানার জন্য) তবে আমি লক্ষ্য করেছি যে IE9 তারিখে + সেখানে মিডিয়া কুয়েরি দেশের মধ্যে সামান্য ত্রুটি একটি বিট আছে। [যদি কেউ এটির সমাধান করতে জানে তবে আমি সত্যিই জানতে চাই :)] <- এখানে স্থিত
display:inline-block;
ভাসা বদলে না ?