如果您需要各处的清空块,无表设计的好处是什么?

我明白从<table>转向<div>标签的目标是有意义的,因为它更具语义。 但是,如果您仍然需要清除块来使基于列的布局正常工作,我不明白获得的好处。 例如:

<!-- 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>标签被严格用来描述风格,并须使布局工作。 这不会毁掉移除表格所带来的所有好处吗?


如果我告诉你,你不需要清理区块?

.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>

如果您正在显示表格数据,那么使用表格然后使用多个浮动div更有意义。 使用你明智的工具 - 不要盲目地使用CSS,而表格是最好的选择。


我明白从<table>转向<div>标签的目标是有意义的,因为它更具语义。

实际上,恰恰相反:从<table>移动到<div>使得HTML语义更少。 实际上, <div> (和<span> )元素的全部内容都是没有语义的!

当我看到被描述为“语义HTML”的<div>的森林时,它总是剔我。 不,这不对! 这是* un- *语义HTML! 特别是如果它包含很多<div class='float-left'><div id='bottom'>和我的个人最爱<div class='paragraph'><span class='emphasis'>

不要误解我的意思,使用非语义的<div> s肯定比使用错误的语义<table>更好,但更好的办法是使用语义上正确的元素 - 尽管在很多情况下问题在于HTML不会不提供任何。 例如,在您的代码片段中,您使用<address>元素,但根据规范,此元素不适用于标记地址! 它仅用于标记页面作者的地址 - IOW完全没用。

您发布的示例缺少大量的上下文,因此很难说,但它实际上看起来像您可能想要显示表格或分层数据,在这种情况下, <table><ul>可能是更好的选择。


完全与您的问题无关:您可能需要查看hCard和XOXO微格式。

链接地址: http://www.djcxy.com/p/88149.html

上一篇: What is the benefit of tableless design if you need clearing blocks everywhere?

下一篇: When is it proper to use a HTML table for layout?