在HTML标记添加宽度边界的清洁方式

采取以下标记：在HTML标记添加宽度边界的清洁方式

<!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;最大宽度：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。

来源

2011-03-31 isNaN1247

我在这里有一个类似的问题，需要：http://stackoverflow.com/questions/5450936/semantic-markup-for-stretchable-header-and-页脚/ 5451985＃5451985似乎添加一个容器来包含标题和正文很常见。那么页脚可以拉伸所有它想要的，仍然有宽度 – corroded 2011-03-31 07:32:46

也blahblah p的结束标签是h1。只是OC（但我知道它只是一个例子） – corroded 2011-03-31 07:33:39

和@corroded：为什么用'语义'来标记你的问题？我发现这个标签没有关于SO的wiki摘要，所以它非常开放，但是我没有在你的问题中看到任何语义。我错了吗？ – MarcoS 2011-03-31 07:38:14

如果您是关注的语义，这里有一个小的改善您的标记：

<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类。

来源

2011-03-31 07:48:28 BoltClock

难道你不能只是将类添加到文章标签？

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

它删除多余的div包装

来源

2011-03-31 07:50:37 GrahamJRoy

不，要求是将块元素的内容移动到中心区域，而物品标签需要是页面的整个宽度（例如背景颜色） – isNaN1247 2011-03-31 07:54:51

@betwtwizzle：您的小提琴的CSS定义了两种背景颜色为'文章'。你需要它是红色还是绿色？无论哪种方式，如果您使用我的标记，您可以将相应的颜色应用于'＃content'和'#content> article'，并保持合理的标记语义级别。 – BoltClock 2011-03-31 07:57:57

@BoltClock，它纯粹是一个用户玩这个问题的场所，而不是我建议的标记 - 这个毯子的颜色只是简单地用于保存我独立编写标题规则 – isNaN1247 2011-03-31 08:01:46

在HTML标记添加宽度边界的清洁方式

回答

相关问题