প্যারেন্টস পূরণের জন্য সিএসএস প্রস্থ কীভাবে করবেন?

Question 1

আমি নিশ্চিত যে এই সমস্যাটি আগে জিজ্ঞাসা করা হয়েছিল তবে আমি উত্তরটি খুঁজে পাচ্ছি না।

আমার নিম্নলিখিত মার্কআপ রয়েছে:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

আমার ইচ্ছেটি 600px( width: 600px;) এর প্রস্থের জন্য ফুও করা এবং নিম্নলিখিত আচরণগুলি বার করা উচিত:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

অন্য কথায় বারের প্রস্থ নির্ধারণের পরিবর্তে বারের 592pxবাইরের প্রস্থটি 100%যাতে সেট করা যায় তা সেট করতে চাই 592px। এখানে গুরুত্বটি হ'ল আমি foo এর প্রস্থকে পরিবর্তন করতে পারি 800pxএবং বারটি গণনা করা হয় যখন আমাকে পরিবর্তে রেন্ডার করা হয় তবে আমাকে নিজেই এই সমস্ত দৃষ্টান্তের জন্য গণিত করতে হবে।

খাঁটি সিএসএসে এটি কি সম্ভব?

এটির সাথে আরও কিছু মজা:

যদি #barএকটি টেবিল হয়?
#barটেক্সেরিয়া হলে কী হবে ?
যদি #barএকটি ইনপুট হয়?
#fooটেবিল সেল ( td) হলে কী হবে ? (এটি কি সমস্যা পরিবর্তন করে বা সমস্যাটি অভিন্ন?)

এখন পর্যন্ত table#bar, input#barআলোচনা করা হয়েছে। আমি টেক্সেরিয়া # বারের জন্য ভাল সমাধান দেখিনি। আমি সঙ্গে কোনো সীমান্ত / মার্জিন / প্যাডিং সঙ্গে একটি পাঠ্য এলাকা মনে divসঙ্গে মোড়ানো যথাসাধ্য কাজ divকাজ স্টাইল জন্য সীমানা হিসাবে textarea।

Question 2

সম্পাদনা :

এই তিনটি পৃথক উপাদানগুলির আলাদা আলাদা রেন্ডারিং বিধি রয়েছে।

অনেক দূরে:

table#barআপনাকে প্রস্থটি 100% এ সেট করতে হবে অন্যথায় এটি কেবল যতটা প্রস্থ হবে তা নির্ধারণ করা হবে es তবে, টেবিলের সারিগুলি যদি মোট প্রস্থের প্রস্থের চেয়ে বেশি হয় তবে barএটি তার প্রস্থের প্রস্থে প্রসারিত হবে। যদি আমি মনে করি আপনি সেট করে এটি প্রতিহত করতে পারেন display: block !important;যদিও আইভিকে এটি ঠিক করতে হয়েছিল since (আমি নিশ্চিত যে আমি ভুল হলে কেউ আমাকে সংশোধন করবে)।

textarea#barআমি বিলিভ একটি ব্লক স্তর উপাদান তাই এটি বিধি হিসাবে একই নিয়ম অনুসরণ করবে। এখানে কেবলমাত্র সতর্কতা হ'ল textareaএকটি বৈশিষ্ট্য নিন colsএবং rowsযা চরিত্র কলামগুলিতে পরিমাপ করা হয়। যদি এটি উপাদানটিতে নির্দিষ্ট করা থাকে তবে এটি CSS দ্বারা নির্দিষ্ট করা প্রস্থকে ওভাররাইড করবে।

input#barএকটি ইনলাইন উপাদান, সুতরাং ডিফল্টরূপে আপনি এটির প্রস্থ নির্ধারণ করতে পারবেন না। তবে textareaএর colsবৈশিষ্ট্যের অনুরূপ , এটির sizeউপাদানটিতে এমন একটি বৈশিষ্ট্য রয়েছে যা প্রস্থ নির্ধারণ করতে পারে। এটি বলেছিল, আপনি সর্বদা এর display: block;জন্য আপনার সিএসএস ব্যবহার করে প্রস্থ নির্দিষ্ট করতে পারবেন । তারপরে এটি ডিভের মতো একই রেন্ডারিং বিধি অনুসরণ করবে।

td#footable-cellএতে কিছুটা উন্মত্ততা রয়েছে এমন হিসাবে রেন্ডার করা হবে। নীচে লাইনটি হ'ল আপনার উদ্দেশ্যে এটি div#fooএর সামগ্রীর প্রস্থকে সীমাবদ্ধ করার মতোই কাজ করবে to এখানে কেবলমাত্র ইস্যুটি কোথাও কোথাও সম্ভাব্য অগ্রহণযোগ্য পাঠ্য হতে চলেছে যা এটি আপনার প্রস্থের সেটিংটিকে উপেক্ষা করবে। এছাড়াও কলামের সমস্ত ঘর বিস্তৃত ঘরের প্রশস্ততা পেতে চলেছে।

ব্লক স্তরের উপাদানটির ডিফল্ট আচরণ - যেমন। প্রস্থটি যদি auto(ডিফল্ট) হয় তবে তা অন্তর্ভুক্ত উপাদানটির অভ্যন্তরের প্রস্থের 100% হবে। সংক্ষেপে তাই:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

আপনি যা চান ঠিক তাই দেবে।

Question 3

প্রায় সেখানে, কেবল পরিবর্তন outerWidth: 100%;করুন width: auto;(আউটআরউইথ কোনও সিএসএসের সম্পত্তি নয়)

বিকল্পভাবে, বারে নিম্নলিখিত স্টাইল প্রয়োগ করুন:

width: auto;
display: block;

Question 4

শৈলী ব্যবহার করুন

left: 0px;

অথবা এবং

right: 0px;

অথবা এবং

top: 0px;

অথবা এবং

bottom: 0px;

আমি মনে করি বেশিরভাগ ক্ষেত্রেই কাজটি হবে

Question 5

সুতরাং গবেষণার পরে নিম্নলিখিতটি আবিষ্কার করা হয়েছে:

একটি div#barসেটিংস display:block; width: auto;জন্য সমতুল্য কারণouterWidth:100%;

একটির জন্য table#barআপনাকে নীচে বর্ণিত বিধিগুলি একটি ডিভের মধ্যে এটি মোড়ানো প্রয়োজন। সুতরাং আপনার কাঠামো হয়ে যায়:

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

এইভাবে সারণীটি 100% প্যারেন্ট ডিভ নেয়, এবং সারণীতে #barWrapসীমানা / মার্জিন / প্যাডিং যুক্ত করতে ব্যবহৃত হয় #bar। নোট করুন যে আপনাকে পুরো জিনিসটির পটভূমি সেট করতে হবে #barWrapএবং #barএর পটভূমিটি স্বচ্ছ বা এর মতো হবে #barWrap।

জন্য textarea#barএবং input#barআপনি একই জিনিস করতে হবে যেমন table#bar, নিচে দিকে যে সীমানা সরানোর দ্বারা আপনাকে ইনপুট / পাঠ্য এলাকা নেটিভ উইজেট রেন্ডারিং বন্ধ এবং হল #barWrapএর সীমানা অন্য সব কিছুর চেয়ে একটু আলাদা চেহারা হবে, তাই আপনি সম্ভবত করতে হবে আপনার সমস্ত ইনপুটগুলি এভাবে স্টাইল করুন।

Question 6

box-sizing: border-box;
width: 100%;
padding: 5px;

বক্স-সাইজিং: বর্ডার বক্স; এটিকে এমন করে তোলে যাতে প্যাডিং, মার্জিন এবং সীমানা প্রস্থের গণনায় অন্তর্ভুক্ত থাকে।

এমডিএন