网上有几种设置列高相等的方法。我认为最好的之一是“Equal Height Columns with Cross-Browser CSS ”。
但是在 Joomla 模块结构上应用该方法存在问题,我不知道如何让它工作。
我用了 rounded module chrome 在 Joomla 模板源上(模块有一个主背景,内部 DIV 有另一个背景图像以包裹模块底部),因此每个模块都以这种方式呈现:
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>
我连续使用 3 个模块,包裹在父 DIV 中。
这是代码:
<div style="width:904px; margin:20px; float:left; overflow:hidden; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user4" style="rounded" />
</div>
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user5" style="rounded" />
</div>
<div style="float:right; width:288px; height:100%;">
<jdoc:include type="modules" name="user6" style="rounded" />
</div>
</div>
</div>
</div>
最后是与 Joomla 模块样式相关的 css:
div.module-gallery, div.module, div.module_menu {
width:291px;
background:url(../images/module-bg.png) no-repeat 50% bottom;
}
div.module div div div, div.module_menu div div div {
padding-right:15px;
padding-left:15px;
background:url(../images/module-bg-bottom.png) no-repeat 50% 100%;
padding-bottom:15px;
min-height:230px;
}
div.module div div div div, div.module_menu div div div div {
background:none;
}
如何通过保存模块背景样式自动/动态地设置模块高度相等。
最佳答案
您需要查看templates/system/html/modules.php
。
然后您可以创建一个 module chrome
的副本来输出您的模块结构,这会更有用,因为您的代码读起来有点离谱,而且不是很语义化。即
function modChrome_myModuleName($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".moduleOuter { your style }";
$css .= ".moduleInner{ your style }";
$doc->addStyleDeclaration($css);
?>
<div class="moduleOuter">
<div class="moduleInner">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
<?php
}
然后您会猜测使用一种样式调用该模块,如下所示:
<jdoc:include type="modules" name="left" style="myModuleName" />
从那时起,您将有一种更语义化的方式来调用您的模块,并使您的 CSS 高度更容易发挥作用。
关于html - 等高 Joomla 模块到一排中最高的模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8228118/