Question

采取以下标记：

<!DOCTYPE html>
<html>
    <head>
        <title>My test for StackOverflow</title>
    </head>
    <body>
        <header>
            <span>LOGO_WOULD_BE_HERE</span>
        </header>
        <article>
            <h1>The title of my page</h1>
            <p>Blah blah blah</p>
        </article>
        <footer>
            <p>Copyright (c) 2011 The World.</p>
        </footer>
    </body>
</html>

这一切都很好，干净和语义 - 然而，想象主要的包装块元素需要有一个占据页面整个宽度的背景，并且你的内容需要在宽度边界内（例如最小宽度的容器：x; max-width：y允许弹性）。

'简单'的方法就是创建一个宽度边界类，将所有内容包装起来，例如：

<header>
  <div class="width-boundary">
    <h1>The title of my page</h1>
    <p>Blah blah blah</p>
  </div>
</header>

CSS类似于：

.width-boundary { min-width: 400px; max-width: 960px; margin: 0 auto; }

这是一个丑陋的解决方案，因为你最终会在你的新标记上找到一堆包装。

我很想听到任何优雅的解决方案 - 尽可能少添加标记，添加的内容应该是语义的。

这是playground I've setup on JSFiddle。

Answer 1

如果你担心语义，那么你的标记会有一些改进：

<section id="content">
    <article>
        <h1>The title of my page</h1>
        <p>Blah blah blah</p>
    </article>
</section>

将宽度限制应用于#content > article：

#content > article {
    min-width: 400px;
    max-width: 960px;
    margin: 0 auto;
}

这样，您就可以完全取消<div>和width-boundary类。

Answer 2

你不能把这个类添加到文章标签吗？

    <article class="width-boundary">
        <h1>The title of my page</h1>
        <p>Blah blah blah</p>
    </article>

它不需要额外的div包装器

在HTML标记中添加宽度边界的简洁方法

2 个答案: