What is the benefit of tableless design if you need clearing blocks everywhere?
I understand that the goal of moving towards <div> tags from <table> makes sense since it is more semantic. However, I don't understand the benefit gained if you still need a clearing block to make column-based layouts work. For example:
<!-- 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>
The extraneous <br> tag is used strictly to describe style, and is required to make the layout work. Doesn't this ruin all benefits gained from removing tables?
如果我告诉你，你不需要清理区块？
.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>If you are displaying tabular data, it still makes more sense to use tables then many floated divs. Use the tools you have wisely - don't blindly use CSS where tables are the best option.
I understand that the goal of moving towards <div> tags from <table> makes sense since it is more semantic.
Actually, it's exactly the opposite: moving from <table> to <div> makes your HTML less semantic. In fact, the whole point of the <div> (and <span> ) elements is to have no semantics!
It always ticks me off, when I see a forest of <div> s described as "semantic HTML". No, it's not! That's *un-*semantic HTML! Especially if it contains a lot of <div class='float-left'> , <div id='bottom'> and my personal favorites <div class='paragraph'> and <span class='emphasis'> .
Don't get me wrong, using un-semantic <div> s is certainly better than using wrong-semantic <table> s, but even better would be to use the semantically correct elements – although in many cases the problem is that HTML doesn't offer any. In your snippet for example, you use the <address> element, but according to the specification, this element is not meant for marking up addresses! It is only for marking up the address of the author of the page – IOW it's utterly useless.
The example that you posted is missing a lot of context, so it is hard to say, but it actually looks like you might want to display either tabular or hierarchical data, in which case <table> s or <ul> s might be a better choice.
Totally unrelated to your question: you might want to take a look at the hCard and XOXO microformats.
链接地址: http://www.djcxy.com/p/88150.html上一篇: 如何从表格切换到表格布局？