100%宽度,填充和绝对定位

Question

我试图在屏幕的某个部分进行div填充,将412px留空到左侧和右侧.容易,嗯？

现在,当我添加position:absolute&top:0时,填充消失.元素检查器显示它是空的 - "填充"保持不变,但宽度:100%消失.我用过这段代码(没有定位):

<div style="height:73px; padding-left:413px; padding-right:413px;">
  <div style="width:100%; height:73px; background:url(top-fill-small.png);">
  </div>
</div>

那么,我怎么能绝对定位它(我需要稍后动画),同时保留填充？我非常爱你的帮助.提前致谢!

Answer 1

也许这个？

<div style="width:100%; position:absolute; top:0; left:0">
    <div style="height:73px; background:url(top-fill-small.png); margin-left:413px; margin-right:413px"></div>
</div>

Answer 2

从时刻,你需要使用position:absolute;,为什么不使用属性left和right代替填充？

HTML

<div style="height:73px;position:absolute;left:413px;right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

示例:http://jsbin.com/anega3

编辑

如果您需要严格使用填充,您可以设置left:0; right:0;然后使用已有的填充.

HTML

<div style="height:73px;position:absolute;left:0;right:0px;padding-left:413px;padding-right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

示例:http://jsbin.com/anega3/2