我正在尝试使用收缩包装的左栏和流畅的主面板来实现设计,这将允许显示尽可能多的图片作为窗口宽度将容纳,而没有水平滚动条。
我在这样做时遇到了很大的麻烦。当我浮动:离开控制栏时,主面板的内容开始围绕它流动。浮动主面板也解决了这个问题,但会导致内容被收缩包装,这意味着图像倾向于排成一列。
有什么优雅的解决方案可以做到这一点吗?
我在这里做了一个问题的模型:http: //jsfiddle.net/PYKwg/2/embedded/result/
我正在尝试使用收缩包装的左栏和流畅的主面板来实现设计,这将允许显示尽可能多的图片作为窗口宽度将容纳,而没有水平滚动条。
我在这样做时遇到了很大的麻烦。当我浮动:离开控制栏时,主面板的内容开始围绕它流动。浮动主面板也解决了这个问题,但会导致内容被收缩包装,这意味着图像倾向于排成一列。
有什么优雅的解决方案可以做到这一点吗?
我在这里做了一个问题的模型:http: //jsfiddle.net/PYKwg/2/embedded/result/
试试这个: http: //jsfiddle.net/CXvRn/10/这一切都在代码中:
这是最基本的 jquery 版本:您必须设置一些常量,例如总水平填充和#main 的水平边距。您可以使用 jQuery 派生它们,但如果它们永远不会更改它们,您不妨自行设置它们并保存一些代码行。
如果你想用 jquery 来做,你可以在这里弄清楚:Padding or margin value in pixels as integer using jQuery
解决方案是 main-content 部分的“overflow:auto”。这建立了一个新的块流框架,内容不会流出(在浮动控制部分下方/之后)。参考:http ://www.w3.org/TR/CSS2/visuren.html#block-formatting
在这里查看它的实际效果:http: //jsfiddle.net/PYKwg/3/embedded/result/
(感谢亚历克斯)