ما فائدة التصميم بدون طاولة إذا كنت بحاجة إلى إزالة الكتل في كل مكان؟

Question

وأنا أفهم أن الهدف من التحرك نحو <div> العلامات من <table> من المنطقي لأنه أكثر الدلالية.ومع ذلك، لا أفهم الفائدة المكتسبة إذا كنت لا تزال بحاجة إلى كتلة مسح لجعل التخطيطات المستندة إلى الأعمدة تعمل.على سبيل المثال:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

الدخيلة <br> يتم استخدام العلامة بشكل صارم لوصف النمط، وهي مطلوبة لنجاح التخطيط.ألا يفسد هذا جميع الفوائد المكتسبة من إزالة الجداول؟

Answer 1

وماذا لو قلت لك لك <أ href = على "HTTP : //www.innovatingtomorrow.net/2008/03/24/how-clear-floats-css "يختلط =" نوفولو noreferrer "> لم <لأ href =" HTTP: //www.positioniseverything. صافي / easyclearing.html "يختلط =" نوفولو noreferrer "> يحتاج كتلة المقاصة؟

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}

<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

Answer 2

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

Answer 3

<اقتباس فقرة>   

وأنا أفهم أن الهدف من التحرك نحو علامات <div> من <table> منطقي لأنه أكثر الدلالي.

في الواقع، انها عكس ذلك تماما: الانتقال من <table> إلى <div> يجعل HTML الخاص بك أقل الدلالي. في الواقع، فإن <م> بيت القصيد من في <div> (وو <span> ) عناصر هي أن يكون <م> لا دلالات!

وكان دائما القراد قبالة لي، وعندما أرى غابة من <div>s صفه ب "HTML الدلالات". لا ليس كذلك! * هذا غير الممثلة * HTML الدلالات! لا سيما إذا كان يحتوي على الكثير من <div class='float-left'>، <div id='bottom'> وقناعتي الشخصية المفضلة <div class='paragraph'> و<span class='emphasis'>.

ولا تفهموني خطأ، وذلك باستخدام <div>s إلغاء الدلالي هو بالتأكيد أفضل من استخدام <م> خطأ <table>s -semantic، ولكن أفضل حتى تكون لاستخدام غويا <م> الصحيحة العناصر - على الرغم من أن في كثير من الحالات أن المشكلة هي أن HTML لا تقدم أي. في المقتطف على سبيل المثال، يمكنك استخدام عنصر <address>، ولكن وفقا ل<لأ href = "https://www.w3.org/TR/html5/sections.html#the-address-element" يختلط = "نوفولو noreferrer" > مواصفات ، هذا العنصر هو <م> لا يعني لوسم عن عناوين! فمن <م> فقط لوسم عن عنوان <م> المؤلف من الصفحة - IOW انها عديمة الفائدة تماما

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

---

ولا تمت بصلة إلى سؤالك: قد ترغب في إلقاء نظرة على ب hCard و <ل أ href = "http://Microformats.Org/wiki/XOXO" يختلط = "نوفولو noreferrer"> XOXO التنسيقات المصغرة.

Answer 4

مُطْلَقاً.هناك الكثير من الفوائد الأخرى لتجنب استخدام الجداول.

• الجداول بدلاً من DIVs
• DIVs مقابل.الجداول دحض من فضلك
• DIV مقابل.الجداول أو CSS مقابل.بالغباء

Answer 5

وأنا شخصيا استخدام clearfix الإختراق لاحتياجات المقاصة بلدي.

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

وإشعار أنا فقط فاصلة فصل محددات بدلا من إضافة الطبقة clearfix على كل شيء. أنه يعمل بشكل جيد حقا. المشكلة الوحيدة هي أن الملكية zoom هي IE محددة ولا تتحقق، ولكن ليس هناك أي آثار جانبية مثل يمكن أن يكون هناك في بعض الأحيان مع الخصائص الأخرى، مثل overflow: auto.

ولقد تم استخدام هذا في المواقع المهنية لمدة 5 سنوات دون أي مشاكل.

Answer 6

وكما يبين الجواب annakata، فإنك لا تحتاج تلك الكتل المقاصة. ولكن بغض النظر عن ذلك، ميزة واحدة لتجنب الجداول هي أن الصفحة يمكن تقديم تدريجيا. لا يمكن إلا أن يصدر جدول عندما <م> كامل الطاولة، بما في ذلك جميع محتوياته، وقد تم تحليل، والذي قد يستغرق بعض الوقت إذا كان لديك صفحة كبيرة واتصال بطيء. عناصر div يمكن تقديم فورا، مما يعني أنك قد تكون قادرة على تقديم شيء يمكن استخدامها للمستخدم في وقت أقرب بكثير مما مع الجداول.

وبطبيعة الحال، هذا لطيف قليلا ميزة مكافأة، فمن لم يكن كذلك، وينبغي ألا يكون <م> السبب لتجنب الجداول (لبيانات غير مجدولة)