CSS 定位：全角标题应与居中的 content-div 具有相同的左边距答案

【问题标题】：CSS positioning: Full-width header shall have the same left margin as the centered content-divCSS 定位：全角标题应与居中的 content-div 具有相同的左边距
【发布时间】：2013-07-01 12:50:03
【问题描述】：

我被困住了，希望有人有一个我没想过的简单解决方案:-)

我有一个 1040px 居中的 div 用于页面内容、菜单和页脚。
标题图像应与内容 div 具有相同的左边距并向右增长（对于具有更高屏幕分辨率的那些）

有没有办法使用 CSS 来做到这一点？我知道，我可以用 javascript 计算内容框的左边距并动态设置页眉边距，但我更喜欢 css 解决方案。

问候，马丁

【问题讨论】：

margin-left: fixedWidth 和 width: inPercentage。这是你想要的吗？

标签： css web-applications html positioning

【解决方案1】：

为什么不把标题放在站点容器之外呢？

然后给它一个 100% 的宽度和一个 1040px 的最小宽度。（或拉伸背景图像，具体取决于它是 1 种颜色还是图像。）

这是你的意思吗？顺便说一下，也许发布 HTML 和 CSS。

【讨论】：

我在站点容器之外有标题，但问题是站点容器居中。我必须找到一种方法来强制标题与站点容器具有相同的左边距。但我不知道怎么做 :-( 这次没有可用的 css .. 都只是 boxmodels。
标题

【解决方案2】：

好的，所以你的意思是标题确实可以延伸，但 内部的内容 标题（菜单、徽标等）没有像站点容器一样居中。

如果是这样的话，这是怎么做的；

<div id="header">
  <div id="headercontent">
    <img src="logo.png">

    <nav>
      <ul>
      <li>menuitem</li>
      <li>menuitem</li>
      <li>menuitem</li>
      <li>menuitem</li>
      </ul>
    </nav>

  </div>
</div>

对于 style 类似的东西；

#footer{
  width: 100%;
  min-width: 1040px;
  color: [your header color];
}

#headercontent{
[in here you simply put the same styling as the sitecontainer]
}

这是你的意思吗？我希望它有所帮助。

【讨论】：

我想我一直在解释错误 :-( 让我试试这个方法：我想实现主要区域保持 1040 像素并居中，而标题向右增长 --> cosketch.com/Rooms/kmjgikx