等高Joomla模塊連接到最高的一個

網上有幾種方法來設置列的高度相等。我認爲最好的之一是「Equal Height Columns with Cross-Browser CSS」。等高Joomla模塊連接到最高的一個

但是，在joomla模塊結構上應用該方法存在問題，我無法確定它工作正常。

我用rounded module chrome（與模塊一個主背景和內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; 
}

我怎麼能設置模塊高度等於自動化/動態地保存模塊背景風格。

感謝

來源

2011-11-22 DummyBeginner

不是一個真正的答案，但是這可能會有所幫助：設置'height：100％'（在CSS中）只有父母也有身高時才能工作。即使將'height：100％'設置爲父元素，也會使子項'height：100％'工作。這就是lightbox「陰影」如何與它的高度一起工作。 – Joseph

你需要採取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高度發揮作用。

來源

2011-11-22 15:36:27 SMacFadyen

等高Joomla模塊連接到最高的一個

回答

相關問題