动态显示内联块页面上的背景颜色

Question

我正在处理动态宽度的页面，并出现以下情况：
这是一个简单的小提琴：http://jsfiddle.net/kk0s4dqc/2/

HTML：

<div class="header">header
</div>

<div class="outer">
<div class="background">    
    <div class="inner">element 1
    </div>
    <div class="inner">element 2
    </div>
    <div class="inner">element 3
    </div>
</div>

CSS：

.header{width:500px; height:50px; margin: 0 auto; background:yellow;}

.outer{width:100%; text-align:center;}
.background{display:inline-block; background:red}
.inner{width:200px; height: 40px; background:blue; display:inline-block; margin:3px}

只要3个内部元素在同一条线上（缩小窗口一点）就可以看到一切都按预期工作，但由于页面是动态的，我不知道内部元素的宽度或屏幕宽度和元素需要在中心对齐，如图所示。

目标是在每条线上显示尽可能多的元素以适应scrren宽度，然后进入下一行，但背景应该只围绕内部div而不是整个屏幕。此外，背景div需要能够拥有背景图像并投下阴影。

我想用漂浮物和清除物无法解决，因为我不知道每行会有多少元素。

任何人都有或多或少的crossbrowser（IE8 +我猜），非JavaScript解决方案？非常感谢帮助。

修改 一个伪元素似乎不是解决方案，但它越来越接近（如此处所见http://jsfiddle.net/dm8g196g/背景效果很好，但阴影失败，因为它不会从元素之间的间隙中掉落

EDIT2 如果有人找到解决方案（没有伪元素），请随意发布。对我来说，一个可接受的替代解决方案是使用calc（）计算背景div的最大宽度，并使用静态值进行一些回退。

Answer 1

您可以使用media="condition for media"

例如

<link rel="stylesheet" type="text\css" href="linkToYourCSS.css" media="screen and (min-width:1000px)">

你可以用高度，最大宽度等替换最小宽度。在那里声明指定的CSS。 阅读更多http://www.w3schools.com/tags/att_link_media.asp

否则你可以用％

定义高度，宽度