Question

我读过很多文章，谴责过度使用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？这可以简化吗？

Answer 1

看起来很完美。这应该作为一个例子！

“divitis”的一个症状是当您看到<div>'s的列表而不是使用<ul>时。

Answer 2

在大多数情况下，你的加价很好。每个站点提出略有不同的问题。我认为可以通过删除#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>

Answer 3

您使用<ul>进行导航，使用<h1><h2>作为标题 - 这对我来说已经足够了。我想不出你正在使用的任何div更合适的元素。会毫不费力地通过我的质量检查。

Answer 4

您在需要时使用<p>，<h*>，这是正确的。

使用div代替适当的元素有什么不好。这里没有这样的东西。

Answer 5

每个人对这个问题可能有不同的看法，但这是我的看法：

您不过度使用<div>。

当使用<div>，<h2>时

如果使用<p>，等等，那你肯定会做错了。换句话说，如果你弯曲<div>以适合你的每一个目的，你就会遇到问题。

不幸的是，当CSS开始流行时，有很多文章在“使用<div>而不是<tagX>”之后用标题/主题来宣传这种做法。图案。

Answer 6

现在可以开始使用新的HTML 5元素，只需几个JS技巧。

然后，您将获得真正有用的页眉，页脚，文章，旁边和菜单元素。

将它与CSS3的样式结合起来用于圆角，阴影...... divitis可能已经治愈，但我们将不得不等待全力支持。

Answer 7

这是很棒的标记。所有元素的语义使用都很好。而美丽的评论使用。（是的，我看到这已经得到了答案并且投票正确，但我是新人并且正在寻找一些观点，如果我先来这里，wammo！）

Answer 8

根本没有过度使用。它是干净的语义代码，只有2个div直接与样式相关（不知道你的.container div是否有样式 - 我猜是这样，你在其他地方使用它们因为它是一个类）。语义代码 - 这才重要！我觉得你做得很好。

Answer 9

立即想到一个变化：
如果这些都是你的所有风格，请放弃.container div。由于它没有样式，所以它是多余的。

Answer 10

我尝试了FF3.5和IE8中的代码。为“header”div定义的背景颜色，在FF3.5中，整个标题div具有该颜色。但在IE8中，背景颜色仅显示横幅和前导div中的标题h2。

所以问题是背景颜色是应该应用于整个标题div还是仅适用于特定部分？

对于容器div，属性类的值为“container”。这个类没有在css中定义。

Answer 11

我是否过度使用div？

取决于您的需求，但恕我直言。

这可以简化吗？

也许使用表格，但是在多个浏览器中使用表格时，表格通常是僵硬且无法容忍的。

我患有“神经炎”吗？（CSS专家需要）

11 个答案:

我患有“神经炎”吗？ （CSS专家需要）

11 个答案:

我患有“神经炎”吗？（CSS专家需要）