盒子阴影落在容器外面

Question

我有一个.container，其中有n个（left-block和right-block）div。 但是浮动到右侧的box-shadow个元素落在容器外面 是否可以将box-shadow置于.container内，而不是使用margin-right

DEMO

Answer 1

只需将overflow:hidden添加到.container：

即可

.container {
    overflow:hidden;
}

Working JSBin

Answer 2

您可以在容器中添加一些填充以进行补偿。

.container {
  /* ... */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 10px;
}

border-box会阻止您添加的填充影响您的width: 100%。

http://jsbin.com/ayiziNa/14

Answer 3

明确实现所要求的唯一方法是添加正确的保证金。

.right-block {
    margin-right: 10px;
}

Answer 4

如果我理解正确，你需要它

.right-block {box-shadow: -10px 10px 5px #888888;}