css 布局：带左栏的图片库答案

【问题标题】：css layout: image gallery with left-barcss 布局：带左栏的图片库
【发布时间】：2011-12-06 10:20:20
【问题描述】：

我正在尝试使用收缩包装的左栏和流畅的主面板来实现设计，这将允许显示与窗口宽度一样多的图片，而无需水平滚动条。

我在执行此操作时遇到了很大的麻烦。当我浮动：离开控制栏时，主面板的内容开始围绕它流动。浮动主面板也可以解决这个问题，但会导致内容被收缩包装，这意味着图像往往会排成一列。

有什么优雅的解决方案可以做到这一点吗？

【问题讨论】：

【解决方案1】：

试试这个：http://jsfiddle.net/CXvRn/10/ 一切尽在代码中：

【讨论】：

我没有作弊或猜测宽度。您应该在固定的元素上设置宽度。除非你做的完全流畅。在这种情况下，左边的宽度为 15%，右边的宽度为 85%。如果您不打算设置宽度，那么您就只能使用 javaScript 作为您的解决方案了。
我的控件不会占用 3800 像素宽度显示的 15%（双宽屏在这里很常见）。同样，在瘦显示器上 15% 是不够的。我对 float:left'd div 的收缩包装行为非常满意。有问题的是设计的其余部分。
我稍微更新了模型以显示内容不是固定宽度。

【解决方案2】：

解决方案是在 main-content 部分使用“overflow:auto”。这建立了一个新的块流框架，内容不会流出（在浮动控制部分下方/之后）。参考：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

（感谢亚历克斯）

【讨论】：

【解决方案3】：

http://jsfiddle.net/CXvRn/29/

这是最基本的 jquery 版本：您必须为#main 设置一些常量，例如总水平填充和水平边距。你可以使用 jQuery 派生它们，但如果它们永远不会改变它们，你最好自己设置它们并保存一些代码行。

如果你想用 jquery 来做，你可以在这里找到：Padding or margin value in pixels as integer using jQuery

【讨论】：