ما هي أفضل طريقة لوضع div في CSS؟

Question

أحاول وضع هذه القائمة:

<div class="left-menu" style="left: 123px; top: 355px">  
    <ul>  
        <li> Categories </li>  
        <li> Weapons </li>  
        <li> Armor </li>  
        <li> Manuals </li>  
        <li> Sustenance </li>  
        <li> Test </li>  
    </ul>  
</div>

على الجانب الأيسر من الصفحة.المشكلة هي أنني إذا استخدمت قيمًا مطلقة أو ثابتة.
ستؤدي أحجام الشاشات المختلفة إلى عرض شريط التنقل بشكل مختلف.لدي أيضًا قسم ثانٍ يحتوي على كل المحتوى الرئيسي الذي يحتاج أيضًا إلى نقله إلى اليمين، وحتى الآن أستخدم القيم النسبية التي يبدو أنها تعمل بغض النظر عن حجم الشاشة.

Answer 1

float هو في الواقع الخاصية المناسبة لتحقيق ذلك.ومع ذلك، يمكن تحسين المثال الذي قدمه bmatthews68.أهم شيء في الصناديق العائمة هو أنها يجب تحديد عرض واضح.قد يكون هذا غير مريح إلى حد ما ولكن هذه هي الطريقة التي تعمل بها CSS.ومع ذلك، لاحظ ذلك px هي وحدة قياس لا مكان لها في عالم HTML/CSS، على الأقل ليس لتحديد العرض.

اللجوء دائمًا إلى التدابير التي تناسب أحجام الخطوط المختلفة، أي.إما استخدام em أو %.الآن، إذا تم تنفيذ القائمة كجسم عائم، فهذا يعني أن المحتوى الرئيسي يطفو "حولها".إذا كان المحتوى الرئيسي أعلى من القائمة، فقد لا يكون هذا هو ما تريده:

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

يمكنك تصحيح هذا السلوك عن طريق إعطاء المحتوى الرئيسي أ margin-left يساوي عرض القائمة:

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>

في معظم الحالات، تريد أيضًا تقديم المحتوى الرئيسي أ padding-left لذلك لا "يلتصق" بالقائمة بشكل وثيق جدًا.

بالمناسبة، من السهل تغيير ما ورد أعلاه بحيث تكون القائمة على الجانب الأيمن بدلاً من اليسار:ما عليك سوى تغيير كل تكرار لكلمة "يسار" إلى "يمين".

اه، شيء أخير.إذا كان محتوى القائمة أعلى من المحتوى الرئيسي، فسيتم عرضه بشكل غريب لأنه float يفعل بعض الأشياء الغريبة.في هذه الحالة، سيتعين عليك مسح المربع الذي يأتي أسفل الجسم العائم، كما في مثال bmatthews68.

/يحرر:اللعنة، HTML لا يعمل بالطريقة التي أظهرتها المعاينة.حسنًا، لقد قمت بتضمين الصور بدلاً من ذلك.

Answer 2

أعتقد أنه من المفترض أن تستخدم يطفو خاصية لوضع أشياء من هذا القبيل. يمكنك القراءة عنه هنا.

Answer 3

جميع الإجابات التي تقول استخدام العوامات (بعرض واضح) صحيحة.ولكن للإجابة على السؤال الأصلي، ما هي أفضل طريقة لوضع أ <div>؟هذا يعتمد.

يعد CSS سياقيًا للغاية، ويعتمد تدفق الصفحة على بنية HTML الخاصة بك.التدفق الطبيعي هو كيفية تخطيط العناصر والعناصر التابعة لها من الأعلى إلى الأسفل (بالنسبة لعناصر الكتلة) ومن اليسار إلى اليمين (بالنسبة للعناصر المضمنة) داخل الكتلة التي تحتوي عليها (عادةً الأصل).هذه هي الطريقة التي يجب أن تعمل بها غالبية تخطيطك.سوف تميل إلى الاعتماد عليه width, margin, ، و padding لتحديد تباعد العناصر وتخطيطها للعناصر الأخرى المحيطة بها (سواء كانت <div>, <ul>, <p>, أو غير ذلك، فإن لغة HTML هي في الغالب دلالية في هذه المرحلة).

باستخدام أنماط مثل float أو absolute أو relative يمكن أن يساعدك تحديد الموضع في تحقيق أهداف محددة جدًا للتخطيط الخاص بك، ولكن من المهم معرفة كيفية استخدامها.وكما تم التوضيح، float يُستخدم بشكل عام لوضع عناصر الكتلة بجوار بعضها البعض، وهو جيد حقًا للتخطيطات متعددة الأعمدة.

لن أخوض في مزيد من التفاصيل هنا، ولكن قد ترغب في التحقق من ما يلي:

• مراجع SitePoint CSS - ربما يكون مرجع CSS الأكثر وضوحًا واكتمالاً الذي وجدته عبر الإنترنت.
• نموذج التنسيق المرئي W3C CSS2.1 - نعم، إنها قراءة صعبة، لكنها تشرح كل شيء.

Answer 4

يجب عليك استخدام سمات CSS العائمة والواضحة للحصول على التأثير المطلوب.

قمت أولاً بتحديد أنماط لما يسمى اليسار واليمين للعمودين في تخطيطي ونمط يسمى أكثر وضوحًا يستخدم لإعادة تعيين تدفق الصفحة.

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

ثم أستخدمها لتخطيط صفحتي.

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />

Answer 5

يمكنك استخدام تعويم

<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

في ملف CSS

.left-menu{float:left;width:200px;}