CSS لعناصر div الحاويات وتراجع إلى السطر التالي

Question

وأنا أكثر من مبرمج من مصمم، وأنا أحاول أن تبني <div>s بدلا من استخدام الجداول ولكن أنا يعلقوا.

وهنا هو ما أحاول القيام به. أنا إنشاء صفحة المسح. أريد نص كل سؤال على الجلوس في الجزء العلوي من شعبة الأزرق، والتفاف لو كان وقتا طويلا. أريد كل من عناصر div الحمراء ليصطف في الزاوية اليمنى العليا للشعبة الحاوية.

تخطيط http://img528.imageshack.us/img528/4330/divsforsurveyop2. JPG

إليك ما كنت بدأت، أنه يعمل بشكل جيد طالما أن الإطار هو أكثر من 420 بكسل. ثم يتخطى شعبة الأحمر إلى السطر التالي. أعتقد أنني قد اقترب من الخطأ، ربما ينبغي أن يسبح الأمور إلى اليمين؟

.greencontainer{
    width:100%;
    spacing : 10 10 10 10 ;
    float: left; 
}

.redcontainer{ 
    float: left; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: center; 
}

.bluecontainer{ 
    clear: both;
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: left; 
}

Answer 1

وهنا هو ما أود القيام به:

<div class="greencontainer">
  <div class="redcontainer">
    <input type="checkbox" />
  </div>
  <div class="bluecontainer">
    <label>Text about this checkbox...</label>
  </div>
</div>

ومع المغلق:

.greencontainer{
   float:left;
   clear:left;
   width:100%;
 }
 .redcontainer{
   float:right;
   width:20px;
 }
 .bluecontainer{
   margin-right:20px;
 }

والقيم الحشو PS يجب أن يكون دائما وحدة، ما لم تكن الصفر.

Answer 2

ولا تطفو أي شيء ولكن الحاوية الحمراء، وتطفو إلى اليمين. تأكد من وضع HTML للحاويات حمراء قبل HTML للحاويات زرقاء. حافظ على عرض ثابت على الحاوية الزرقاء، والحفاظ على واضحة: على حد سواء على الحاوية الخضراء

Answer 3

لا تستخدم اضح: على حد سواء على bluecontainer لأنه سوف مسح أي عنصر على جانبي (اليسار واليمين). ويجب عليك ان تجعل تعويم redcontainer إلى اليمين.

Answer 4

لديك "واضحة: كل من" على شعبة الأزرق. هذا ما أعتقد يسبب المشكلة.

http://www.barelyfitz.com/screencast/ أتش تي أم أل التدريب / المغلق / المواقع / حيث كان بعض المظاهرات في متناول يدي.

Answer 5

والقليل جدا من التجارب هنا، ولكن أنا <م> التفكير سترغب "واضح: على حد سواء؛" على .greencontainer بدلا من "تعويم: غادر". أيضا إزالة "واضحة: على حد سواء" من .bluecontainer

وانظر مزيد من المعلومات على العنوان التالي: http://www.quirksmode.org/css/clearing. أتش تي أم أل

Answer 6

وأنا لا أعتقد أنك في حاجة إلى تعويم الحاوية الخضراء على الإطلاق كما هو div الذي يحتوي. بالاضافة الى ذلك، "واضح: على حد سواء". لن يؤدي إلا إلى الحاجة بيان إذا وضع عدة عناصر div أزرق / أحمر في نفس الحاوية الخضراء

وحاول

.greencontainer{
    width:100%;
spacing : 10 10 10 10 ;

}

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
font-family: sans-serif; 
    text-align: left; 
}
.redcontainer{ 
    float: right; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
font-family: sans-serif; 
    text-align: center; 
}

وقد تحتاج أيضا إلى إضافة الهامش الأيمن إلى الحاوية الزرقاء أو الهامش الأيسر إلى الحاوية الحمراء للحصول على تباعد متناسقة فيما بينها بدلا من استخدام الحشو التي تتعلق التباعد داخل شعبة لا حوله