سؤال

أحتاج إلى جعل الكود التالي قابلاً للامتداد مع ارتفاع محدد مسبقًا

<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, ، على الرغم من أن هذا قد يكون له نفس المشكلة لأنك في الواقع تفعل نفس الشيء مثل المدى.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top