بحاجة إلى div css العامة التي لا تتداخل (مثل الجدول)

Question

أحاول استخدام Divs بدلا من الجداول إلى صناديق النمط حول المحتوى الخاص بي. يمكن أن يكون المحتوى اي حجم ويحتاج إلى السماح للمتصف تغيير حجم إلى أي درجة. وبعد بحاجة إلى لون الخلفية والحدود ل تحتوي على المحتوى. وبعد هذا يعمل بشكل جيد مع الجداول. كيف يمكنني الحصول على div للعمل بنفس الطريقة؟

ملاحظة: أضفت "_" لأن مسافاتي غير الكسر كانت تضيع.

عينة الصفحة

عينة الصورة

_{(مصدر: c3o.com.)}

محتوى:

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>

Answer 1

لا توجد طريقة سهلة للقيام بذلك التي هي crossbrowser الودية التي أعرفها.

على الأقل في Firefox، يمكنك إنشاء جدول محاكي عن طريق ضبط Divs

display:table;
display:table-row;
display:table-cell;

بحيث تعمل تلك divs مثل عناصر الجدول. ثم سوف يحتوي المربع محتوى عليه. Wether هذا حل جيد أو غير قابل للتنفيذ.

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

Answer 2

إذا كنت لا ترغب حقا في استخدام جدول، فيمكنك القيام بذلك:

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

في المرة القادمة التي يأتي فيها هذا النوع من المشكلة الذهاب إلى insupandusetables.com..

Answer 3

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

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

لأفكار أخرى، تحقق من هذا حتى السؤال.

Answer 4

أولا، يجب أن تستخدم العلامات الدلالية. إذا كان هناك شيء ما رأس ومحتوى يميزه على هذا النحو مع علامات الرأس والفقرة. من شأنها أن تساعدك في الخروج من "جدول الطاولة" الذي حاولت محاكاة علامتك وأساليبك مثل جدول، يجب أن يأتي الترميز أولا، يمكن أن تأتي CSS بعد.

يجب أن تفعل ما يلي ما تريد:

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

التفكير في العلامات والأسلوب بشكل منفصل هو الطريق إلى CSS Zen إتقان: O)

Answer 5

هذا يعمل (يحمل بالفعل معا أفضل من الجداول في IE7 أيضا)

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}   

ملاحظة: يجب أن يكون لدى كلا المربعين الحشو الأيمن واليمين نفسه أو juts واحد قليلا.

Answer 6

لا يلزم العوامات، ولكن يبدو أنك مربكة استخدامات الهامش مقابل الحشو. يعمل القرص الصغير التالي على أسلوبك وأنت بحاجة إليه إلى:

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

لقد غيرت الحشو في المربع إلى هامش، وانتقل الحدود إلى المربع الخاص بك، وأضاف تسطير إلى الرأس.

Answer 7

أتيحت له هذه المشكلة أيضا باستخدام Firefox 6.0.1، Opera 10.62، Safari 5.1، ولكن ليس في IE 9، والفيضان: تم إصلاحه تلقائيا في جميع المتصفحات. لا شيء آخر فعله. لقد جربت أيضا تجاوز الفائض: تحتوي على، والتي تم إصلاح المشكلة أيضا، ولكن يبدو أنها تحتوي على قيمة صالحة للفيضان، لذلك أفترض أنه نظرا لأن القيمة غير صالحة، تم استبدال تلقائي.