كيفية ضبط خاصية الارتفاع للسبان
سؤال
أحتاج إلى جعل الكود التالي قابلاً للامتداد مع ارتفاع محدد مسبقًا
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
لكن منذ فترة عنصر مضمّن ، فإن خاصية "الارتفاع" لن تعمل.
حاولت استخدام div بدلاً من ذلك ، لكنه سيتوسع إلى عرض العنصر العلوي. ويجب أن يكون العرض مرنًا.
هل يمكن لأي شخص اقتراح أي حل جيد لهذا؟
شكرا لك مقدما.
المحلول
أعطها display:inline-block
في CSS - يجب أن تدعها تفعل ما تريد.
من حيث التوافق: IE6/7 إرادة العمل مع هذا ، كما يوحي وضع المراوغات:
IE 6/7 يقبل القيمة فقط على العناصر ذات الشاشة الطبيعية: مضمّنة.
نصائح أخرى
يستخدم
.title{
display: inline-block;
height: 25px;
}
الحيلة الوحيدة هي دعم المتصفح. تحقق مما إذا كانت قائمة المتصفحات المدعومة مقابضًا مضمونة هنا.
هذا هو العرض: عمل كتلة مضمّنة في جميع المتصفحات:
Quirkly بما فيه الكفاية ، في IE (6/7) ، إذا قمت بإطلاق Haslayout مع "Zoom: 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; }
لكي تعمل الامتدادات مثل خلايا الجدول (أو أي عنصر آخر ، لهذه المسألة) ، يجب تحديد الارتفاع. لقد أعطيت ارتفاعًا ، وهم يعملون بشكل جيد-ولكن يجب عليك إضافة الارتفاع لجعلهم يفعلون ما تريد.
خيار آخر بالطبع هو استخدام JavaScript (jQuery هنا):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
لماذا تحتاج إلى فترة في هذه الحالة؟ إذا كنت ترغب في تصميم الارتفاع ، فهل يمكنك استخدام Div فقط؟ قد تجرب Div مع display: inline
, ، على الرغم من أن هذا قد يكون له نفس المشكلة لأنك في الواقع تفعل نفس الشيء مثل المدى.