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