我读过很多文章，谴责过度使用div。我有一种感觉，我可能会在以下标记中这样做：
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
/* header */
#header {
background: #EEE;
}
#header h1 {
float: left;
}
#header h2,
#header a,
#header p {
color: #999;
}
#header h1 a {
background: url(../images/logo.png) no-repeat scroll 0 0;
float: left;
height: 30px;
text-indent: -9999px;
width: 500px;
}
#banner {
border-bottom: 1px solid #DDD;
padding: 0 0 15px 0;
margin: 30px 0 30px 0;
overflow: hidden;
width: 960px;
}
#lang {
float: right;
padding: 9px 0 0 0;
}
#lang li {
float: left;
margin: 0 0 0 20px;
}
#lang li a {
font-size: 10px;
}
/* intro */
#intro {
overflow: hidden;
padding: 0 0 30px 0;
}
#tagline {
float: left;
margin: 0 40px 0 0;
width: 540px;
/* 560 */
}
#tagline h2 {
font-size: 24px;
}
#about {
float: right;
width: 380px;
}<div id="header">
<div class="container">
<div id="banner">
<h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
<ul id="lang">
<li><a href="index.php">English</a></li>
<li><a href="es/index.php">Español</a></li>
<li><a href="tw/index.php">中文(繁體)</a></li>
<li><a href="cn/index.php">中文(简体)</a></li>
</ul>
</div>
<div id="intro">
<div id="tagline">
<h2>Nulla vitae tortor mauris</h2>
<p>Pellentesque faucibus est eu tellus varius in susc...</p>
</div>
<div id="about">
<h2>right</h2>
<p>Pellentesque faucibus est eu tellus varius in susc...</p>
</div>
</div>
<!-- #intro -->
</div>
<!-- .container -->
</div>
<!-- #header -->
使用这些div的说明：
标题：定义扩展到窗口末尾的背景颜色（位于div .container之外）
容器将内容（但不是背景）居中
横幅：定义ul#lang和h1附近的背景或边框颜色
介绍：与上述内容相同，但适用于#tagline和#about（否则我必须为标语和单独定义填充或边距说明）
我是否过度使用div？这可以简化吗？
答案 0 :(得分：37)
看起来很完美。这应该作为一个例子！
“divitis”的一个症状是当您看到<div>'s的列表而不是使用<ul>时。
答案 1 :(得分：19)
在大多数情况下，你的加价很好。每个站点提出略有不同的问题。我认为可以通过删除#intro并将CSS应用于两列来改进您的代码。
根据页面的其他部分，您可以不使用#header div。
此外，如果需要，您可以设置html和body样式以帮助处理多个背景/容器。请记住，只要您开始将样式应用于body，div就会像html一样（不会扩展到浏览器的底部）。
使用divs或新的HTML 5块元素，首先要做出语义上的意义，然后让你把CSS挂起来。
由于每个div元素都用于特定目的，它们提供了一起组合的元素的语义分组，我会说你的代码很好。
记录中，这是divitis：
<div class='image'>
<div class='shadow'>
<div class='bottom-shadow'>
<img src="..." alt="" />
</div>
</div>
<div class="clear"></div>
</div>
答案 2 :(得分：8)
您使用<ul>进行导航，使用<h1><h2>作为标题 - 这对我来说已经足够了。我想不出你正在使用的任何div更合适的元素。会毫不费力地通过我的质量检查。
答案 3 :(得分：3)
您在需要时使用<p>，<h*>，这是正确的。
使用div代替适当的元素有什么不好。这里没有这样的东西。
答案 4 :(得分：3)
每个人对这个问题可能有不同的看法，但这是我的看法：
您不过度使用<div>。
<div>，<h2>时 如果 使用<p>，等等，那你肯定会做错了。换句话说，如果你弯曲<div>以适合你的每一个目的，你就会遇到问题。
不幸的是，当CSS开始流行时，有很多文章在“使用<div>而不是<tagX>”之后用标题/主题来宣传这种做法。图案。
答案 5 :(得分：2)
现在可以开始使用新的HTML 5元素，只需几个JS技巧。
然后，您将获得真正有用的页眉，页脚，文章，旁边和菜单元素。
将它与CSS3的样式结合起来用于圆角，阴影...... divitis可能已经治愈，但我们将不得不等待全力支持。
答案 6 :(得分：2)
这是很棒的标记。所有元素的语义使用都很好。而美丽的评论使用。 （是的，我看到这已经得到了答案并且投票正确，但我是新人并且正在寻找一些观点，如果我先来这里，wammo！）
答案 7 :(得分：1)
根本没有过度使用。它是干净的语义代码，只有2个div直接与样式相关（不知道你的.container div是否有样式 - 我猜是这样，你在其他地方使用它们因为它是一个类）。语义代码 - 这才重要！我觉得你做得很好。
答案 8 :(得分：0)
立即想到一个变化：
如果这些都是你的所有风格，请放弃.container div。由于它没有样式，所以它是多余的。
答案 9 :(得分：0)
我尝试了FF3.5和IE8中的代码。为“header”div定义的背景颜色，在FF3.5中，整个标题div具有该颜色。但在IE8中，背景颜色仅显示横幅和前导div中的标题h2。
所以问题是背景颜色是应该应用于整个标题div还是仅适用于特定部分？
对于容器div，属性类的值为“container”。这个类没有在css中定义。
答案 10 :(得分：-5)
我是否过度使用div？
取决于您的需求，但恕我直言。
这可以简化吗？
也许使用表格，但是在多个浏览器中使用表格时，表格通常是僵硬且无法容忍的。