css layout：带左栏的图库

Question

我正在尝试使用收缩包装的左栏和流体主面板来实现一个设计，这将允许在窗口宽度可以容纳的情况下显示尽可能多的图片，而不需要水平滚动条。

我这样做有很大的麻烦。当我浮动：离开控制栏时，主面板的内容开始围绕它流动。浮动主面板也解决了这个问题，但导致内容被收缩包裹，这意味着图像往往排成一列。

有没有优雅的解决方案呢？

我在这里制作了一个问题的模型：http://jsfiddle.net/PYKwg/2/embedded/result/

Answer 1

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

1. 我在#mainWrapper
中包装了#main
2. 我添加了padding-left 220px到#mainWrapper。
3. 我添加了float：left to“#top .thing”和“#bottom .thing”

Answer 2

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

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

如果你想用jquery做这件事你可以在这里找出答案：Padding or margin value in pixels as integer using jQuery

Answer 3

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

在此处查看此操作： http://jsfiddle.net/PYKwg/3/embedded/result/

（谢谢Alex）