1

我有一个居中的包装 div，其中包括一个标题、三个内容列（基于内容长度的（基于 css 的）动态高度）和一个页脚。

现在我想要一个背景，将这些元素的颜色向左和向右扩展。

这是一个 js-fiddle 演示：http: //jsfiddle.net/SLvYx/

所以我希望左上角为红色，左中角为黄色，左下角为绿色，依此类推。我的第一个解决方案是使用宽度为 2500 像素的背景 .png 作为正文，但那是在基于内容的列的动态高度被认为是必要的之后才实施的。

恐怕可能没有纯基于 html/css 的解决方案，但 JQuery 或 javascript 也是一种选择，尽管我只是脚本方面的初学者。也许我想开箱即用，也许我必须重做整个 html 结构来完成这个，但我不介意。:-)

我几乎到处搜索，但在任何地方都找不到那个特定的案例。

非常感谢您的帮助，因此提前感谢所有对此进行调查的人。

编辑：我发现这篇文章：Dynamic table size html that could help, 也许这是一个解决方案，使用一个有 5 列的表格，第一个用于左侧背景，第二至第四个用于内容，第五个用于右侧背景...这是热烈推荐的，还是我应该把桌子放在外面？

这是我的演示的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />  <title>Test</title>
<style type="text/css">
body {margin:0;}
#wrapper {margin: 0px auto; width: 940px;}
#header {background:red; height:100px;}
#content_wrapper {width: 940px; padding: 0px 0px 0px 0px; background: #CCC; overflow: hidden;}
#leftcolumn {background:yellow; width: 470px; float:left; height:auto; min-height: 680px;}
#middlecolumn {background:goldenrod; width: 235px; float:left; height:100%; margin-bottom: -1000px; padding-bottom: 1000px;}
#rightcolumn {background:darkgoldenrod ; width: 235px; float:left; height:100%;margin-bottom: -1000px; padding-bottom: 1000px;}
#footer {background:lightgreen; height:100px;}
</style>
</head> 
<body>

<div id="wrapper">

    <div id="header">
        Header
    </div>

        <div id="content_wrapper">        

            <div id="leftcolumn">
                Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />Left Column<br />
            </div>

            <div id="middlecolumn">
                Middle Column
            </div>

            <div id="rightcolumn">
                Right Column
            </div>

        </div>    

    <div id="footer">
        Footer
    </div>

</div>    

</body>
</html>
4

1 回答 1

1

不，您不需要 javascript 或表格。常规的 ol'（基于 div）的 HTML 和 CSS 可以解决问题。

您需要做的是稍微重组您的页面。不要依赖包装器 div，而是堆叠三个主要部分，然后在每个部分中添加一个内部 div，它是您想要的宽度。请参阅更新的JSFiddle。

我在每个部分中添加了一个（当然是非语义的）div，其类为“inner”，它获得了您所追求的 940 宽度。

现在唯一的技巧是中间部分。您要做的是创建一个非常宽、短的图像。比如说，3000px 宽 x 1px 高。将其拆分为 50/50，使左侧为黄色，右侧为暗金色棒。如果您使用该图像作为 content_wrapper 的背景，并使其垂直平铺，则会产生颜色从侧面延伸的错觉。这适用于大多数浏览器。

如果你不关心旧浏览器，你甚至可以更进一步，在 content_wrapper 的背景上使用 CSS Gradients。看到这个更进一步更新的 Fiddle。

渐变在 IE9 或更低版本中不起作用 - 但没关系，因为图像在样式表中作为后备。

于 2012-09-28T12:42:53.177 回答