0

我收到了以下布局：

页面布局

在哪里：

  • A = 标题，width: 100%
  • B = 页面内容，max-width: 960px; margin: 0 auto
  • C =页脚，width: 100%

我遇到的问题是H1。该设计有一个 H1 的背景，它从屏幕的最左侧进入，并一直延伸到与下方内容的右侧对齐。如果浏览器窗口小于 960 像素，那么显然它只是一个实心条，横跨整个屏幕。

我真的不知道如何开始这个。我考虑过某种负左边距+左边距，但在不知道固定大小的情况下，很难依靠百分比来准确排列元素。

我认为我最接近的解决方案是拥有一个以 H1 为中心的大型背景图像，或者可能在 H1 周围的容器上。不理想，因为它只是一种纯色，所以使用图像违背了我的道德判断。

有任何想法吗？这是页面的结构：

<header>
    <h1>This is my title</h1>
</header>
<article></article>
<footer></footer>

CSS

header,
footer {
    width: 100%;
    min-height: 100px;
    background: #eee;
    overflow: hidden;
}

article {
    margin: 0 auto;
    max-width: 500px;
    height: 100px;
    background: #ddd;
}

h1 {
    margin: 30px auto;
    width: 500px;
    background: #bbb;
}
4

3 回答 3

1

您可以尝试多种方法来执行此操作。

jQuery 解决方案将提供最准确的结果，但对于此类问题来说它有点沉重，而且我个人不喜欢将 Javascript 用于 CSS 问题。

您可以对背景图像进行某种技巧，您可能必须取决于您的实际设计，但就单一背景颜色而言，我可能会使用位于标题后面且具有负边距的元素来解决问题 -顶部，并设置 50% 的宽度（这样它应该始终隐藏在标题后面）。您需要做的就是匹配它height并将margin-top其与标题混合。

.header-botch {
  background: #bbb;
  height:37px;
  width:50%;
  margin-top:-67px;
}

http://jsfiddle.net/duFnR/1/

如果由于某种原因您讨厌使用负边距的想法，您可以position: absolute使用该元素

http://jsfiddle.net/duFnR/2/

于 2013-10-18T09:35:08.337 回答
0

不涉及图像的解决方案似乎是将 H1 包裹在某些东西中并将背景渐变应用到该元素，请参见 fiddle。我已将 H1 背景设为绿色，以使背景颜色更明显。

优点：

  • 能够在 CSS 中管理颜色
  • 高度根据 H1 的高度而变化，必要时允许多行

缺点：

  • 宽度必须设置为不大于 H1 的宽度，否则在非常薄的窗户上它会出现在另一侧。一旦达到指定的宽度，它也具有完全消失的奇怪行为（较小时不是问题，因为您不会看到它消失）。
  • 在非常大的窗户上，宽度不够，H1 左侧会出现间隙。

代码

<div class="h1Wrapper">
    <h1>This is my title</h1>
</div>

CSS

.h1Wrapper {
    /*background: #bbb;*/
    background-image: -webkit-linear-gradient(left, #BBBBBB 300px, #FFFFFF 300px);
    background-position: center;
}

h1 {
    margin: 30px auto;
    width: 500px;
    background: lime;
}
于 2013-10-18T10:34:47.423 回答
0

为什么不使用 jQuery 并计算 H1.width = (B offset left) + B.outerWidth() ？

于 2013-10-18T08:45:01.640 回答