一种在HTML标记中添加宽度边界的干净方法_Html_Css_Semantics

一种在HTML标记中添加宽度边界的干净方法

html css

一种在HTML标记中添加宽度边界的干净方法,html,css,semantics,Html,Css,Semantics,采用以下标记： <!DOCTYPE html> <html> <head> <title>My test for StackOverflow</title> </head> <body> <header> <span>LOGO_WOULD_BE_HERE</span> </he

采用以下标记：

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

不过，这是一个丑陋的解决方案，因为您的新标记上到处都是包装

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

以下是一个。

如果您非常关心语义，那么这里有一些对标记的改进：

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

这样，您就可以完全取消

和

宽度边界

类。

您不能将类添加到文章标记中吗

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


我的页面标题
废话废话

它不再需要额外的div包装器

我这里有一个类似的问题：添加一个容器来包含标题和正文似乎很常见。然后，页脚可以拉伸它想要的，但仍然有一个宽度，而且你的blahblah p的结束标记是h1。仅仅是OC（但我知道这只是一个例子）和@腐蚀：你为什么用

语义标记你的问题？我看到这个标签上没有wiki摘要，所以它非常开放，但我看不到你问题中的任何语义。我错了吗？不，要求是块元素的内容移动到中心区域，而文章标签需要是页面的全宽（例如背景色）@beardtwizzle:fiddle的CSS为文章
定义了两种背景色。你需要红色还是绿色？无论哪种方式，如果您使用我的标记，您都可以将各自的颜色应用于#content
和#content>文章，并保持合理的标记语义水平。@BoltClock，它纯粹是用户为了提问而玩弄的游乐场，不是我建议的标记-毯子的颜色只是用来保存我单独编写标题规则
<section id="content">
    <article>
        <h1>The title of my page</h1>
        <p>Blah blah blah</p>
    </article>
</section>

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

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