拉伸背景的CSS布局

Question

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

渐变在左侧和右侧是纯色，渐变为中心附近的白色。 （水平渐变）

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

有没有一种方法可以在不使用html表的情况下展示出来？

它看起来像我需要某种形式的三列

[leftcolumn] [contentcolumn] [rightcolumn]

rightcontent =可伸展和充满右solid.png重复-X
含量= 900px填充main-gradient.png作为背景不重复
leftcontent = canstrech并填充left-solid.png重复-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