在没有javascript的情况下，将元素扩展到居中换行的浏览器边框

Question

我有一个居中换行(固定宽度和动态填充)，并在一些p-标签。这些标签的backgroundColor必须扩展到浏览器的左侧边框，但内容仍应保持在居中内容区域内。

我设法使它与JavaScript(示例)。

HTML:

<div>
    <p>asd</p><br>
    <p>asd</p><br>
    <p>asd</p>
</div>

JS:

$(document).ready(function() {
    $('p').css('padding-left', $('div').css('padding-left')).css('margin-left', "-" + $('div').css('padding-left'));
});

CSS:

div {
    width: 300px;
    background: green;
    padding: 0 calc(50% - 150px)
}
p {
    height: 50px;
    margin-bottom: 10px;
    background: blue;
    display: inline-block;
}

但我希望它是这样的只有css。有没有一种方法可以在没有JavaScript的情况下获得这种行为?

FF, Chrome, iPad, iOS5/6, Safari, IE9+必须支持。

/编辑:

感谢大家的回复。我在p元素上使用了inline-block，使其不向右扩展，因为它应该像行内元素一样具有所需的最小宽度。但是我仍然希望下一个元素在新行中(如果有更好的解决方案，欢迎)

多亏了PaulvdTool，我设法找到了一个解决方案:http://jsfiddle.net/EFhkH/2/

但是，如果您有更好的主意在inline-block之后强制换行，那么您可以使用

Answer 1

你想要发生的事情(我从你的描述中得到的)甚至没有在你的小提琴中发生。当我调整屏幕大小时，蓝色不会停留在左侧。我试着用CSS制作它，我通过使用:before元素来管理它。此效果仅适用于单行文本。

也许有人可以扩展一下。

CSS

#container {
    width: 300px;
    background: silver;
    margin: 0 auto 0 auto;
}
.text {
    width: 100%;
    background: gray;
}
.text:before {
    content: ".";
    background: gray;
    width: 50%;
    position: absolute;
    left: 0;
    z-index: -1;
    color: gray;
}

HTML

<div id="container">
    <div class="text"><p>line 1</p></div>
    <div class="text"><p>line 2</p></div>
    <div class="text"><p>line 3</p></div>
    <div class="text"><p>line 4a<br />line 4b</p></div>
/div>

http://jsfiddle.net/PaulvdDool/rtRQD/

EDIT我通过在before元素中添加点"。"来作弊，否则背景不会显示。我设置了与背景相同的颜色，使圆点不可见