具有拉伸(stretch)背景的 CSS 布局

Question

我的设计布局在内容容器中具有渐变背景。

渐变在左侧和右侧为纯色，在中心附近渐变为白色。 (水平渐变)

如果查看区域较大，我有三个图像 left-solid.png 和一个 right-solid.png 用于扩展内容区域的左侧和右侧。我有 main-gradient.png 作为主要内容的背景，固定大小为 900px

有没有办法不用 html 表格来布置它？

看起来我需要某种类型的三列

[左栏][内容栏][右栏]

rightcontent=可以拉伸(stretch)填充 right-solid.png repeat-x
content = 900px 填充 main-gradient.png 作为背景 无重复
leftcontent = canstrech 并填充 left-solid.png repeat-y

有什么建议吗？

Answer 1

有多种方法可以在不使用表格的情况下实现多列布局。事实上，使用表在语义上是不正确的。这正是创建 CSS 的原因之一。

使用以下 HTML 结构:

<div class="container">
    <div class="left">
    </div>
    <div class="middle">
    </div>
    <div class="right">
    </div>
</div>

然后你可以在 CSS 中这样做:

.left, .middle, .right {
   display: inline-block;
}

这将告诉 div 彼此相邻出现。还需要额外的 CSS 样式，例如每列的宽度属性(最好使用百分比)。

CSS 的另一个选项是:

.left, .middle, .right {
   float: left;
}

这也会让 div 彼此相邻出现，但它以一种非常不同的方式实现。

---

另外请注意，您不需要为渐变使用图像。您可以使用 CSS 进行渐变。看看http://www.colorzilla.com