البحث عن معلومات توافق متصفح CSS لتحديد العرض باستخدام اليسار واليمين
https://stackoverflow.com/questions/128241
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
إليكم السؤال الذي ظل يطاردني منذ عام الآن.السؤال الأساسي هو كيف يمكنني ضبط حجم العنصر بالنسبة إلى العنصر الأصلي بحيث يتم إدراجه بواسطة N بكسل من كل حافة؟قد يكون تحديد العرض أمرًا رائعًا، لكنك لا تعرف عرض الأصل، وتريد تغيير حجم العناصر مع النافذة.(لا تريد استخدام النسب المئوية لأنك تحتاج إلى عدد محدد من وحدات البكسل.)
تحرير ، أحتاج أيضًا إلى منع المحتوى (أو عدم وجود محتوى) من تمديد أو تقلص كلا العنصرين.الإجابة الأولى التي حصلت عليها كانت استخدام الحشوة على الأصل، والتي من شأنها أن تعمل بشكل رائع.أريد أن يكون عرض الوالد 25% تمامًا، وبنفس ارتفاع منطقة عميل المتصفح تمامًا، دون أن يتمكن الطفل من الضغط عليها والحصول على شريط التمرير./يحرر
لقد حاولت حل هذه المشكلة باستخدام {top:Npx;left:Npx;bottom:Npx;right:Npx;} ولكنه يعمل فقط في متصفحات معينة.
من المحتمل أن أكتب بعض جافا سكريبت باستخدام jquery لإصلاح جميع العناصر مع كل تغيير حجم الصفحة، لكنني لست سعيدًا بهذا الحل.(ماذا لو كنت أريد إزاحة الجزء العلوي بمقدار 10 بكسل ولكن الجزء السفلي بمقدار 5 بكسل فقط؟يصبح الأمر معقدًا.)
ما أود معرفته هو إما كيفية حل هذه المشكلة بطريقة عبر المتصفحات، أو قائمة من المتصفحات التي تتيح حل CSS السهل.ربما شخص ما لديه خدعة تجعل هذا الأمر سهلاً.
المحلول
ال نموذج صندوق CSS قد يوفر لك رؤية ثاقبة، ولكن أعتقد أنك لن تتمكن من تحقيق تخطيط مثالي للبيكسل باستخدام CSS وحده.
إذا فهمت بشكل صحيح، فأنت تريد أن يكون عرض الأصل 25% وارتفاع منطقة عرض المتصفح تمامًا.إذًا تريد أن يكون عرض الطفل 25% - 2n بكسل وارتفاعه 100%-2n بكسل مع n بكسل يحيط بالطفل.لا تتضمن مواصفات CSS الحالية دعمًا لهذه الأنواع من الحسابات (على الرغم من أن IE5 وIE6 وIE7 لها خصائص غير قياسية دعم تعبيرات CSS و IE8 يسقط الدعم لتعبيرات CSS في وضع معايير IE8).
يمكنك فرض وصول الأصل إلى 100% من مساحة المتصفح وعرض 25%، لكن لا يمكنك تمديد ارتفاع الطفل إلى مستوى البكسل المثالي باستخدام هذا...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...ولكن سيظهر شريط تمرير أفقي.وأيضًا، إذا تم ضغط المحتوى، فلن تتجاوز الخلفية الأصلية 100%.ربما يكون هذا هو مثال الحشو الذي قدمته في السؤال نفسه.
يمكنك تحقيق وهم التي تبحث عنها من خلال الصور وdivs الإضافية، لكن CSS وحدها، لا أعتقد، يمكنها تحقيق الكمال في البكسل مع تطبيق متطلبات الارتفاع هذه.
نصائح أخرى
إذا كنت مهتمًا فقط بالتباعد الأفقي، فيمكنك جعل جميع عناصر الكتلة الفرعية داخل عنصر الكتلة الأصل "إدراجًا" بمقدار معين عن طريق إعطاء حشوة العنصر الأصلي.يمكنك إنشاء عنصر كتلة فرعي واحد داخل عنصر الكتلة الأصلي "إدراج" عن طريق إعطاء هوامش العنصر.إذا كنت تستخدم الطريقة الأخيرة، فقد تحتاج إلى تعيين حد أو حشوة بسيطة على العنصر الأصلي لمنع انهيار الهامش.
إذا كنت مهتمًا بالتباعد الرأسي أيضًا، فأنت بحاجة إلى استخدام تحديد المواقع.يجب تحديد موضع العنصر الأصلي؛إذا كنت لا تريد نقله إلى أي مكان، فاستخدمه position: relative ولا تهتم بالإعداد top أو left;وسوف يبقى حيث هو.ثم يمكنك استخدام الموضع المطلق على العنصر الفرعي، وتعيين top, right, bottom و left نسبة إلى حواف العنصر الأصل.
على سبيل المثال:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
إذا كنت تريد تجنب المحتوى من توسيع عرض عنصر ما، فيجب عليك استخدام overflow الممتلكات، على سبيل المثال، overflow: auto.
ما عليك سوى تطبيق بعض الحشو على العنصر الأصلي، دون عرض على العنصر الفرعي.على افتراض أنهما كلاهما display:block, ، يجب أن يعمل بشكل جيد.
أو اذهب في الاتجاه المعاكس:تعيين margin من عنصر الطفل.
العائمة يعد مصدرًا رائعًا لأشياء مثل هذه.
جرب هذا:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
يجب أن تحتوي على مساحة Npx من جميع الجوانب، وتمتد لملء العنصر الأصلي.
يحرر:وبطبيعة الحال، على الوالدين، يمكنك أيضا استخدام
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
