我一直在尝试制作一个 joomla 模板,左侧和右侧有一个固定宽度的栏。主 div 应该是响应式的。
我设法在这里创建了我想要的布局:http: //dennybeulen.nl/rena/nl/over-ons.html
唯一不起作用的是左侧的菜单。当我更改 css 时,菜单有效,但布局不再正确。
如果我进行这些更改(刚刚删除了 130 前面的“-”),菜单就可以工作:
div.fluid{
margin-left: 130px;
}
希望有人能给我一些提示。
我一直在尝试制作一个 joomla 模板,左侧和右侧有一个固定宽度的栏。主 div 应该是响应式的。
我设法在这里创建了我想要的布局:http: //dennybeulen.nl/rena/nl/over-ons.html
唯一不起作用的是左侧的菜单。当我更改 css 时,菜单有效,但布局不再正确。
如果我进行这些更改(刚刚删除了 130 前面的“-”),菜单就可以工作:
div.fluid{
margin-left: 130px;
}
希望有人能给我一些提示。
看起来像是div.fluid
覆盖了你的左栏。尝试进行div.left
绝对定位并将您的设置div.fluid
为没有左边距:
div.fluid{
float: left;
width: 100%;
margin-right: -290px;
margin-left: 0px;
}
div.left{
position: absolute;
width: 130px;
min-height: 1px;
padding-top: 10px;
}
请记住, div.left 将不再影响浮动在它上面的元素。
@gaynorvader 是正确的,因为您的中间容器位于菜单顶部。除了将其定位为绝对,您还可以将所有内容保持原样,仅添加position:relative;z-index:1
for div.left
。