كيفية وضع العديد من DIVs في CSS

Question

لقد قمت بدراسة برنامج تعليمي طويل على W3Schooles لتعلم CSS؛لقد تعلمت بعض الأساسيات ولكنني مازلت أفتقد هدفي الأساسي:تحديد موضع DIVs

هذا ما أحاول القيام به

*---------*---------*
*         *         *
*         *         *
*---------*---------*

هدفي بسيط وتافه بالنسبة للبعض، ولكنني أعاني من الصداع عند القيام بذلك طريق صحيح, ، في الواقع لقد قمت بذلك ولكن هناك الكثير من المشكلات عندما أقوم بإضافة المزيد من النص إلى عناصر DIV أو ببساطة يتم دمجها مع عناصر DIV أخرى

ما فعلته هو ببساطة اللعب بقيم الهامش والحشو باستخدام FireBug.كل ما أحتاجه الآن هو أن تعلمني هذه الخدعة البسيطة (كما آمل)، ما أفتقده هو:كيف يعمل هذا الوضع البسيط؟هل يجب علي استخدام الموضع المطلق والنسبي؟تغيير الهامش والحشوة والحجم؟؟

إذا كان لديك برنامج تعليمي جيد يشرح هذه النقطة، لذا يرجى الإشارة إليه.كان لدي صداع آخر أثناء البحث عن ذلك على Google.

Answer 1

ويبدو أنك تحاول تعويم عمودين بجانب بعضها البعض. هذا هو بسيط نسبيا وغطت في عمق هنا:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout / 2-العقيد /

وأنا أميل إلى البقاء بعيدا عن موقف الملكية ما لم يكن لدي لتراكب بعض العناصر.

Answer 2

إنشاء تخطيط عمودين في CSS

أنا شخصياً لا أحب استخدام واضح: كلاهما على علامة br.

يستخدم تجاوز:آلي على القسم الأصلي بدلاً من ذلك

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Answer 3

لقد حالفني الحظ في محاكاة الكود الموجود في ملف 960 نظام الشبكة.

ال طريق صحيح أمر صعب لأن العديد من الأشياء ليست متوافقة حقًا مع المتصفحات.تتحسن المتصفحات، ولكن لا يزال الأمر كابوسًا إذا كان عليك استخدام أي شيء متوافق مع IE.(الكثير من الاختراقات)

Answer 4

ومع المواقع المطلق يمكنك وضع على الاطلاق أي من لشعبة بك. عيب أن تتقطع بهم السبل في تلك المناصب بغض النظر عن القرار أو حجم نافذة عرض صفحتك.

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

Answer 5

إذا كنت على ما يرام مع وضع الاعراض محددة بشأن عناصر div الخاص بك، وعملت ما يلي بشكل جيد بالنسبة لي:

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

وو"تعويم: غادر" يجعل الأعمدة تصطف جنبا إلى جنب. وشعبة الماضي (مع واضحة: على حد سواء) يجعل من ذلك أن أي شيء كنت وضعت بعد الأعمدة يبقى تحت الأعمدة. بهذه الطريقة، يمكنك تغيير عرض العمود إما دون العبث مع التصميم من جهة أخرى.

Answer 6

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>