css 布局：带左栏的图片库
我正在尝试实现一种带有收缩包装左栏和流体主面板的设计，这将允许在窗口宽度容纳的情况下显示尽可能多的图片，而无需水平滚动条。
我在做这件事时遇到了很大的麻烦。当我浮动：离开控制栏时，主面板的内容开始在其周围流动。浮动主面板也解决了这个问题，但会导致内容被收缩包装，这意味着图像往往会排列在单列中。
有什么优雅的解决方案可以做到这一点吗？
我在这里制作了问题的模型： http://jsfiddle.net/PYKwg/2 /嵌入/结果/
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
试试这个： http://jsfiddle.net/CXvRn/10/ 一切都在代码中：
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
http://jsfiddle.net/CXvRn/29/
这是最基本的 jquery 版本：
您必须设置一些常量，例如 #main 的总水平填充和水平边距。您可以使用 jQuery 派生它们，但如果它们永远不会更改它们，您不妨自行设置它们并保存一些代码行。
如果您想使用 jquery 来完成此操作，您可以在这里找到： 使用 jQuery 以像素为单位的填充或边距值作为整数
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
解决方案是主要内容部分的“overflow:auto”。这建立了一个新的块流框架，该框架的内容不会流出（在浮动控制部分下方/后面）。参考：http://www.w3.org/TR/CSS2/visuren .html#block-formatting
在此处查看实际效果：
http://jsfiddle.net/PYKwg/3/embedded/result/
（谢谢亚历克斯）
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)