恼人的css + div布局

Question

我遇到了css + div布局的问题。我需要将背景div设置为左侧调整大小，并将内容位置保持在中心位置。 看图片：

Layout div

正如你所看到的，我需要保持右边的空间固定，但内容需要居中，背景只需要向左扩展，是否可以呢？

Answer 1

我很快就举了一个例子：http://jsfiddle.net/N73QA/

如果您有任何问题，请告诉我。

Answer 2

也许你需要这个

#content{
 float:right;
 margin-right: 10px; /* or more */

 width: ......
}

这将使您的内容保持正确;保证金权利可能需要大于10px才能使其看起来居中

Answer 3

不确定我是否完全理解（您的问题似乎与图表冲突），但是您不能将所有内容都包含在屏幕宽度为50％的div中吗？

风格：

#wrapper { width: 50%; }
#header, #bg, #footer { background: #46F; margin-bottom: 1em; }
#header { clear: both; float: right; height: 80px; width: 90%; }
#footer { clear: both; height: 80px; margin-top: 1em; }
#bg { clear: both; float: right; padding: 20px; width: 100%; }
#content { background: #ABF; clear: both; float: right; height: 400px; padding: 20px; width: 80%; }

标记：

<div id="wrapper">
    <div id="header"></div>
    <div id="bg">
        <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sollicitudin sodales turpis et ultricies. Sed in enim ligula.
        </div>
    </div>
    <div id="footer"></div>
</div>

包装器占屏幕的50％，而内容可以是固定的或百分比。一切都在包装内向右浮动。