css - float 元素，全宽

Question

我有一个固定大小的布局，我将内容容器居中。

我希望菜单(主页、关于、联系人、登录)跨越 100% 的屏幕。

看看这个 jsfiddle:http://jsfiddle.net/Hxhc5/1/

我想要的结果是这样的:

我曾尝试用菜单制作一个 100% 宽度的容器，我将在其中放置一个容器以将菜单居中，但效果不佳，因为布局是相对的，随窗口大小而变化。

Answer 1

在菜单周围包裹一个额外的 div，给它灰色背景，移除额外的填充，使菜单背景为白色:

http://jsfiddle.net/sg3s/Hxhc5/3/

但是当我们想要保持菜单和右侧列之间的空间“打开”时，这是有问题的。

最简单也可能是最好的方法是制作一个中间保持“开放”状态的模拟图像，并将其用作背景。由于这种类型的 png 图像非常小，它比更多的标记、css 或 js 解决方案更好，而且如果使用得当，它没有任何问题:

http://jsfiddle.net/sg3s/Hxhc5/10/

您还展示了您的实际开发站点；如果你想为菜单实现这个，你必须使菜单固定高度(其他任何东西和它的宽度仍然可以是流动的)由于你在层中使用的不透明度类型。可以使用相同的背景技巧来使用它。