В Интернете есть несколько способов установить одинаковую высоту столбцов. Один из лучших, на мой взгляд, это " Столбцы одинаковой высоты с кросс-браузерным CSS ".
Но есть проблема с применением этого метода к структуре модуля joomla, и я не могу понять, что он работает нормально.
Я использовал хром модуля с закругленными углами (с одним основным фоном для модуля и другим фоновым изображением для внутреннего DIV, чтобы обернуть модули снизу) на исходном шаблоне jooomla, поэтому каждый модуль отображает таким образом:
<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>
и, наконец, есть связанный с Css стиль модулей Joomla:
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;
}
Как можно установить высоту модулей равной автоматизировать / динамически с сохранением стиля фона модуля.
Спасибо