CSS布局与拉伸背景

Question

我有这种设计布局，在内容容器中有渐变背景。

渐变是左右两边的纯色，中心附近是渐变为白色。 （水平梯度）

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

有没有办法在不使用html表的情况下解决这个问题？

看起来我需要三列某种

[leftcolumn] [contentcolumn] [rightcolumn]

rightcontent =可以拉伸并填充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