السلام عليكم تحياتى لكم جميعا عندى مشكلة هوا ازاى الديف بيتقسم بطريقة سليمة بمعنى الديف الاب بعطية 100% عرض والديفات الى بداخلة كل ديف بعطيه 100% عرض هل كدا التقسيم مظبوط ولا فى خطاا وشكرا لكم
لدى مشكلة فى تقسيم ال div داخل صفحة html
وعليكم السلام ورحمة الله وبركاته
بطريقة افتراضية محدده بواسطة المتصفح يأخذ الديف 100% من مساحة الأب له بدون أي تدخل منك
لست مضطرا لإعطاء الديف الإبن أية خواص ليأخذ كل المساحة الخاصة بالأب
أما إذا كنت تريد التقسيم الأب إلى مجموعة أبناء فوقتها يمكنك تقسيم مساحة الأب على الأبناء
تمام طيب حضرتك الكود ده مقسم صح كدا
.content/الديف الاب/
{background-color:red;
height:450px;
width:50%;
border-radius:10px;
border:5px solid green;
margin:auto;
}
/الابناء/
.nav
{
width:90%;
height:100px;
background-color:orange;
}
.menu
{
width:90%;
height:100px;
background-color:orange;
}
لا مشكلة في الكود حتى الآن ولكني لا أعرف فيما تريد استخدامه إن كان صحيحاً أم بحاجه لتعديل ما
حسناً لا مشكلة لديك في هذا وإن أردت التأكد من مساحات كل ديف يمكنك عممل فحص للعنصر لمعرفة المساحة التي يأخذها
لا يوجد معيار أساسي لتقسيم ال divs داخل صفحة Html بل يكون التقسيم حسب الحاجة وحسب ما تريد أن تفعله أنت في التصميم. ال div يأخد خاصية display:block تلقائيا أي أن العرض الخاص به 100% دون تدخل منك ولكن أحيانا نحتاج وضع ال divs بجانب بعضها البعض أو نقسمها بطريقة مخصصة هنا يأتي دور التصميم ووضع بعض خواص Css للديف مثلا أن تحدد عرضه وارتفاعه وهكذا. على سبيل المثال سوف نحاول وضع اثنين من div بجانب بعضهم البعض باستخدام خاصية Css التي تسمى Float وتحديد طول وعرض ال div من خلال الكود التالي:
تمام فهمت مقصدق ولاكن لو ارضنا عمل ضيف كبير او الاب فانة ياخذ العرض 100%
اذا اردت ان شاء اكثر من ديف داخل الديف الاب اى بمعنى الابناء واعطيت الديفات الابناء او الديفات الموجودة داخل الديف الاب اعطيتهم width100% كل ضيف اخذ 100% هل هذا التقسيم صحيح
السؤال غير واضح كم عدد الاعمدة التي تريد وكم عرض كل عمود..
على كل حال هناك طريقة حديثة لعمل تخطيط الصفحة layout
وذلك باستخدام خاصيتين للـ display
احدهما flex والثاني grid وهذه مدعومة في كل المتصفحات حاليا..
يمكنك البحث في اليوتيوب لتشاهد مدى سهول تقسيم محتوى الصفحة وعمل التخطيطات وكذلك استخدام الاستعلام media لجعل التخطيط متجاوب مع انواع الشاشات المختلفة.
التعليقات