Question

我的CSS知识非常有限，所以我把我的问题放在这里希望最好。

我在我的网站上使用此框：http://www.456bereastreet.com/lab/flexible_custom_corners_borders/，我需要以两列格式显示内容。

我尝试使用简单的表，并使用带浮点集的div（需要clearfix，以便父级得到它的高度）。我的问题是出现在左侧的视觉错误。

仅在表和div浮动时发生。 p，h1等工作正常。

以下是该错误的图片：http://img18.imageshack.us/img18/8783/imagem2hdp.png

由于

编辑：这是代码：http://dl.getdropbox.com/u/178438/css_test.zip

Answer 1

您应该为.content设置背景颜色，这将隐藏边框图像的那一部分。

- 在下面编辑 -

渐变和边框之间的额外空白看起来就像一个元素被侧向推，当它实际上是左边框背景图像的第二个主要div的所有部分。

div // Right border
    div // Top border with corner sub divs
    div // Left border
        div // Content
    div // Bottom border with corner sub divs

由于框的内容部分位于左边框div内，边框背景图像是精灵风格，多个图像放在一个较大的图像中，因此唯一的CSS解决方案是将背景颜色应用于内容用于覆盖左背景图像的区域（如左背景div正在对右背景div进行操作）

还有其他方法可以解决此问题，例如将图像分离为单独的文件或将内容div移到左边框div之外，但此时您不再使用相同的框了。

CSS视觉效果

1 个答案: