2

我正在尝试使用收缩包装的左栏和流畅的主面板来实现设计,这将允许显示尽可能多的图片作为窗口宽度将容纳,而没有水平滚动条。

我在这样做时遇到了很大的麻烦。当我浮动:离开控制栏时,主面板的内容开始围绕它流动。浮动主面板也解决了这个问题,但会导致内容被收缩包装,这意味着图像倾向于排成一列。

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

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

4

3 回答 3

2

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

  1. 我将#main 包裹在#mainWrapper 中
  2. 我在#mainWrapper 中添加了 padding-left 220px。
  3. 我将 float:left 添加到“#top .thing”和“#bottom .thing”
于 2011-10-12T19:52:49.147 回答
1

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

这是最基本的 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 回答