আমার নীচের কোডটি পূর্বনির্ধারিত উচ্চতার সাথে প্রসারিত করতে হবে
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
তবে স্প্যানটি ইনলাইন উপাদান হিসাবে, "উচ্চতা" সম্পত্তি কাজ করবে না।
আমি পরিবর্তে ডিভ ব্যবহার করার চেষ্টা করেছি , তবে এটি উচ্চতর উপাদানের প্রস্থে প্রসারিত হবে। এবং প্রস্থ নমনীয় হওয়া উচিত।
কেউ কি এর জন্য কোনও ভাল সমাধানের পরামর্শ দিতে পারেন?
আগাম ধন্যবাদ.
উত্তর:
এটি display:inline-blockসিএসএসে একটি দিন - এটি আপনার যা চান তা করতে দেয়।
সামঞ্জস্যের ক্ষেত্রে: আইক 6/7 এর সাথে কাজ করবে , যেমন কুইর্কস মোডটি পরামর্শ দেয়:
IE 6/7 কেবলমাত্র প্রাকৃতিক প্রদর্শন সহ উপাদানগুলিতে মান গ্রহণ করে: ইনলাইন।
inline-block।
Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".
IE 6/7 accepts the value only on elements with a natural display: inline.
span। হেনাশরাফ তথ্যের জন্য ধন্যবাদ।
ব্যবহার
.title{
display: inline-block;
height: 25px;
}
একমাত্র কৌশলটি ব্রাউজার সমর্থন। আপনার সমর্থিত ব্রাউজারগুলির তালিকা এখানে ইনলাইন-ব্লক পরিচালনা করে কিনা তা পরীক্ষা করে দেখুন ।
এটি প্রদর্শন করতে হয়: সমস্ত ব্রাউজারে ইনলাইন-ব্লক কাজ:
মোটামুটিভাবে যথেষ্ট, আইই (6/7) এ, আপনি যদি "জুম: 1" এর সাহায্যে লেআউটটি ট্রিগার করেন এবং তারপরে প্রদর্শনটি ইনলাইনে সেট করেন তবে এটি একটি ইনলাইন ব্লক হিসাবে আচরণ করে।
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
ধরে নিই যে আপনি এটিকে একটি ব্লক উপাদান তৈরি করতে চান না, তবে আপনি চেষ্টা করতে পারেন:
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
কিন্তু সহজ সমাধান কেবল চিকিত্সা হয় .titleএকটি ব্লক-স্তরের উপাদান হিসেবে, এবং সঠিক শিরোনাম ট্যাগ ব্যবহার <h1>মাধ্যমে <h6>।
স্প্যান { display: table-cell; height: (your-height + px); vertical-align: middle; }
টেবিল-কক্ষের মতো স্প্যানগুলির কাজ করার জন্য (বা অন্য কোনও উপাদান, সেই বিষয়ে), উচ্চতা নির্দিষ্ট করতে হবে। আমি স্প্যানগুলি একটি উচ্চতা দিয়েছি, এবং সেগুলি ঠিক কাজ করে - তবে আপনি যা চান তা করার জন্য আপনাকে অবশ্যই উচ্চতা যুক্ত করতে হবে।
অবশ্যই অন্য একটি বিকল্প জাভাস্ক্রিপ্ট ব্যবহার করা (এখানে জ্যাকারি):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
এই ক্ষেত্রে আপনার একটি স্প্যানের দরকার কেন? আপনি যদি উচ্চতা স্টাইল করতে চান তবে আপনি কেবল একটি ডিভি ব্যবহার করতে পারবেন? আপনি সম্ভবত একটি ডিভ চেষ্টা display: inlineকরতে পারেন, যদিও এটি একই সমস্যা হতে পারে যেহেতু আপনি কার্যকরভাবে স্প্যান হিসাবে একই জিনিসটি করছিলেন।