هل لاحظت أنه ليس من السهل محاذاة الصور أفقيا (وضع صورة بجانب الاخرى) في مدونة بلوجر؟ هل سبق لك أن حاولت محاذاة اثنان أو أكثر من الصور؟
إذا حاولت ضبط موقع او مكان كل صورة باستخدام خيارات المحاذاة الموجودة في مدونة بلوجر (يسار، يمين، وسط)، فإن ذلك لن ينفع. لماذا هذا؟ وكيف يمكن لنا محاذاة الصور بشكل صحيح بحيث تمكننا من وضع الصور جنب بعض بشكل افقي في داخل موضوع التدوينة؟
كيفية محاذاة الصور (وضع صورة بجانب الاخرى) داخل الموضوع في مدونة بلوجر؟
أولا دعونا نوضح المشكلة اكثر مع مثال على ذلك. إذا قمت بتحميل ثلاثة صور، وقمت بمحاذاة أول صورة على اليمين والثانية في الوسط والثالثة الى اليسار عندها ستحصل على النتيجة التالية:
لماذا تتم محاذاة الصور؟ هنا نوضح لكم .. الكود التالي يظهر في الـ HTML عند اضافة صورة في التدوينة :
كما تلاحظون ان <div> و clear: both يتم ادراجها اوتوماتيكياً من قبل بلوجر عند اضافة صورة. هذه الخاصية تمنع عناصر HTML الاخرى (اي في مثالنا هذا الصورة 2 والصورة 3) من التداخل مع بعضها او انزلاق واحدة على الاخرى، ونتيجة لذلك تم احاطة كل صورة بزوج من <div> و</div>، وCSS يمنع المحاذاة .
ولذلك لكي اتمكن من اضع صورة جنب الاخرى يجب ازالة بعض علامات <div> و</div> حيث سيتم حل المشكلة . سنزيل العلامات التي تم إضافتها بين الصور. سنترك العلامة الأولى والعلامة الاخيرة للتأكد من عدم دخول أي شيء آخر على جانبي الصور الثلاثة، وهذه النتيجة :
الاكواد التي قمت بحذها هي :
