اذهب إلى المحتوى
  • 0

كيف أجعل عناصر HTML مختلفة في الطول بجانب بعضها بإستخدام CSS؟

علي أحمد-2

السؤال

ما أقصده هو أنني لدي عناصر من نوع Div ولكنها مختلفة في الطول بحيث أن محتوى كل منها يزيد عن الآخر في الطول، ولكنها تظهر بطريقة غير منظمة مثل التالي:

Untitled.png

 

فأنا لا أريد الفراغات البيضاء، كيف يمكنني عمل هذا مثل الموجود في صفحة أفضل المستخدمين في حسوب IO مثل الصورة:

Capture.PNG

 

عمل Inspect بالجوجل كروم أدوات المطورين ووجدت أنه بالــposition ثم التحكم بعناصر الصفحة، وأعتقد أن قيم مواقع العناصر (left - top - right - bottom) يتم جلبها بالــjQuery ، فهل هنالك كود أو مثال عملي أستطيع الفهم منه كيفية عمل شيء كهذا ؟

وشكراً .

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

إذا كنت في بداية التعلم أنصحك بمتابعة دروس قناة الزيرو ستجد دروس BOM ثم DOM

بعدها إذا أردت تعلم تقنية Ajax ستجدها في قناة الأستاذ عبد الله عيد

وأنصحك دائما إذا واجهت مشكلة أو دالة لم تجدها في JavaScript إبحث أولا في Google

ستجد في الغالب الحل في stackoverflow.com أو developer.mozilla.org

وبعد أن تتعلم ما سبق أنصحك بتعلم البرمجة الكائنية ستجد لها شرحا على هذه القناة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 1 ساعة قال طارق جهاد:

استخدم خاصية float ضمن div

واذا اردت عرض 3 div ضمن السطر الواحد، اعطي عرض موحد ضمن ستايل div

width: 30%;

لم يعمل الأمر نهائياً، هل يتم الأمر عن طريقة الjQuery؟؟
لأنني عملت inspect element لأرى في حسوب IO كيف يتم عملها ثم وجدتها بالPosition absolute ..

هل يمكنك عرض مثال كود لكي أفهم لو سمحت ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 13 ساعات قال zakariamouhid:

هذا سكربت كتبته لترتيب التدوينات في 3 أعمدة

http://codepen.io/zakariamouhid/pen/jyxKxa

شكرأ لك أخى الكريم كنت أبحث عن هذه الطريقة ولم أجدها إلا هنا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 15 ساعات قال zakariamouhid:

هذا سكربت كتبته لترتيب التدوينات في 3 أعمدة

http://codepen.io/zakariamouhid/pen/jyxKxa

شكراً لك صديقي @zakariamouhid ، تم عمل الموضوع بكل بساطة وإحترافية..

___
وجدت لك مساهمات عديدة هنا وفي حسوب I/O ولك فيها خير مثال بأنك محترف في الجافاسكربت، ما شاء الله.
كيف تنصح شخص يود أن يعرف في الجافاسكربت ما يساعده في تطوير المواقع الاحترافية وخصوصًا تجربة المستخدم. (مثلاً بأن يكون الكود نظيفًا، ومرتب ومقروء...الخ)، بالإضافة إلى ما هي المعلومات الضرورية التي يجب على كل مطور ويب معرفتها؟

وإذا أنا في بداية الطريق، ما هي الدورات (العربية - الإنجليزية) التي تنصحني بها أخي زكريا؟ خصوصًا إنني أريد تعلم الــAjax، وقيل بأنه من الأفضل تعلم الـDOM والـBOM معًـا قبلها! فهل هذا صحيح؟ أعني هل هذا الترتيب الصحيح للتعلم؟
وإذا كان هنالك نصائح أخرى أخي العزيز أتمنى أن تشرحها أو تدلني على دورات ومواقع استفدت أنت منها.
وجزاك الله خير.
شكراً لك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 ساعات قال zakariamouhid:

إذا كنت في بداية التعلم أنصحك بمتابعة دروس قناة الزيرو ستجد دروس BOM ثم DOM

بعدها إذا أردت تعلم تقنية Ajax ستجدها في قناة الأستاذ عبد الله عيد

وأنصحك دائما إذا واجهت مشكلة أو دالة لم تجدها في JavaScript إبحث أولا في Google

ستجد في الغالب الحل في stackoverflow.com أو developer.mozilla.org

وبعد أن تتعلم ما سبق أنصحك بتعلم البرمجة الكائنية ستجد لها شرحا على هذه القناة

شكراً لك أخي @zakariamouhid، فعلاً أنا في بداية الطريق وشكراً على النصائح القيّمة.
 

لدي سؤال آخر بسيط: ما هي التطبيقات المناسبة التي يجب أو يفضل على الشخص المبتدئ تعلمها قبل أن يصل لمرحلة متقدمة؟
مثلاً: آلة حاسبة عن طريق جفاسكربت؟ -- برنامج لرفع الصور وقصّها بنسبة معينة؟ -- لعبة بسيطة تعتمد على الCookies في تخزين نقاط اللاعب بحيث يستطيع اللعب بها حتى ولو أغلق جهازه وفتحه بعد زمن آخر؟ -- أي تطبيقات أخرى مفيدة؟ ((هل لك موقع أو مدونة أو قناة خاصة أخي زكريا؟)).
وشكراً :)

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...