div的继承DIV对于jock的位置让我疯狂

Question

我有这个让我发疯的问题...我已经挣扎了几个小时，但无法弄清楚如何过来。

我正在使用jqDock，并希望将工具栏放在列中的“框”中。包含了大量代码，但您可以在此处查看示例：http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17

在工具栏完美放置的右侧栏中查看“Simple File Lister v2.0＃2”。然后查看工具栏垂直的左侧，完全偏离轨道。 这两个模块（在Joomla中调用它们）使用完全相同的代码！

这两个模块之间的区别，左边和右边是左边的一个从左栏中的“div”语句继承了很多CSS。

问题似乎来自先前加载的CSS文件的继承“宽度”。如果我在FireBug中查看它并在FireBug中删除#leftcolumn div {width：191px;}的声明，则左侧的工具栏工作正常。

我试图在所有不同的DIV上插入我自己的“宽度”并使用“！important”，但即使FireBug将“#leftcolumn div”显示为stiked-out，它仍会影响我的工具栏DIV。

无论我如何试图“取消”继承的“#leftcolumn div”宽度，它仍会影响我的DIV。 关于我如何摆脱它的任何线索？

此致 安德斯

Answer 1

尝试下面的css - 将其粘贴到template.css文件中，并尝试在不同的选择器上设置宽度。

#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
    width: 20px;
}

见下图输出：在新窗口中打开图像，以便清楚地看到。

Answer 2

问题1.您正在尝试将最大扩展宽度为263px（7个48x48图标）的水平Dock安装到仅为191px宽的列​​中：Dock将溢出！

问题2.您正在使用的模板是在div＃leftcolumn的div.module子项下面的任何div上设置特定宽度191px。此外，您的模板在某些元素上指定宽度和填充，这将导致跨浏览器不一致，并且还使一些元素超出列的边界。

由于jqDock在元素上没有提供很多ID，因此覆盖模板所需的规则必须至少与模板一样“具体”，如果不是这样的话。

例如，替换页面的规则......

.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}

...与

/*position the Dock's container, ensuring it's visible, and killing
  the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
    padding: 0pt;
    position: relative;
    top: -20px;
    width: auto;
    z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
  of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
    left: 50%;
    margin-left: -150px;
    padding: 0px 0pt;
    position: absolute;
    top: 0pt;
    width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
    width: auto;
    padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
    margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}

我还建议你需要更多的Dock水平空间（即模块标题和文件列表之间），你的标签需要更好的样式，以便可见和可读。