13

编辑：更一般的问题：我喜欢 div 上的 box-shadow，但是当我将 div 直接放在 box-shadow 的 div 下方时，尽管弄乱了 z-index，阴影的底部不会覆盖在顶部。所以看起来 box-shadow 不能覆盖另一个 div？任何想法都会很棒！

原始问题-我正在使用蓝图进行布局。这意味着有一个 .container ，950px其中包含一个.container #content。

在这种情况下，#content填充整个容器也是如此950px。

我想#content在.container.

一种解决方法是减小宽度，#content但这会弄乱我已经拥有的布局定位，并且看起来太窄了。

有没有办法让盒子阴影忽略父容器并出现在它上面？我猜这不是特定于蓝图的，但这就是上下文。谢谢！

编辑：

body .container {
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}
body .container:after {
    clear: both;
    content: "";
    display: table;
}
#content {
    display: inline;
    float: left;
    margin-right: 0;
    width: 950px;
    box-shadow: 0 0 4px black;
    -moz-box-shadow: 0 0 4px black;
}

#content是直接在.container。如果我在上面放置阴影，#content直到我缩小宽度才能看到它，这会与内部元素混淆。

4

4 回答 4

3

我会为.container元素添加一些填充，并确保您#content保持在所需的宽度。

于 2011-09-14T12:30:35.200 回答
2

您不需要overflow: hiddenon .container，因为您已经使用 clear fix 了。所以，你可以把它扔掉：http: //jsfiddle.net/kizu/gDXLf/

于 2011-09-15T21:40:17.783 回答
1

这一切都取决于您要达到的目标。

我在处理一组内联块列表项时遇到了困难。悬停时右侧的阴影被旁边的列表项切断

一个简单的技巧是将以下内容添加到元素中：

li:hover {
    transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
}

工作示例

虽然，这可能只适用于特定场景。我只在上面的示例中对其进行了测试。

于 2014-07-14T02:56:49.277 回答
0

您可以使 .container 更宽（对于固定宽度，960 是完全可以接受的）并保持 #content 在 .container 内居中。这对你有什么影响吗？

于 2011-09-14T12:29:00.890 回答