1

我正在尝试在 CSS 中创建以下布局：

在此处输入图像描述

这是一个典型的 Web 布局，其中所有内容都在一个包装器 DIV 中，该 DIV 具有定义的宽度并以页面为中心。

但是，紫色背景是 CSS 渐变，需要填充浏览器的整个宽度（而不仅仅是内容包装器的宽度）。此外，不同的页面会有不同的标题/介绍文本行（例如，一些页面可能有 3 行，其他只有 1 行），因此紫色背景需要与此内容的高度相匹配。

我还使用了一个 CMS，它将所有内容放在一个具有宽度并以margin:auto.

如何实现布局？

起初我虽然可以position:absolute在标题/介绍 div 上使用。这很好用。除了其余内容隐藏在标题/介绍 div 后面。在此处查看示例：http: //jsfiddle.net/5BkX6/1/

然后我尝试position:relative在标题/介绍 div 上使用，然后使用负左值和填充来拉伸 DIV 的背景，同时保持内容居中。在此处查看示例：http: //jsfiddle.net/4DZYr/1/

这种方法效果很好，除了它创建了一个水平滚动条。我知道我可以将 overflow-x:hidden 应用于主包装器 DIV 以隐藏滚动条，但我不希望一开始就拥有它。

我怎样才能实现我的目标。我不想使用 jquery 来获取标题/介绍 DIV 的高度。

4

1 回答 1

1

这应该给你你想要的布局^^这是Html

<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
   <div class="content">
      <div class="left"></div>
      <div class="right"></div>
   </div>
</div>
</body>

这是风格

.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}
于 2012-10-06T14:45:00.137 回答