動態1-2-3列布局

我正在尋找解決方案如何創建動態3列布局，但如果左列是emtpy，內容和右列將是widder。就像它在joomla模板中一樣，如果你沒有將任何模塊放在左邊的位置，它會展開。動態1-2-3列布局

2012-02-11 ubo281

您將需要使用單獨的頁面模板，這些模板將根據頁面內容顯示，或者您可以在使用javascript加載頁面後執行，但我不會建議這樣做。我相信如果一個列是空的，Joomla會顯示一個不同的模板。

另一個選項有「動態」列寬使用表，但你不想去那裏:-)

2012-02-11 15:11:13 Richard

javascript是簡單的解決方案，但如果用戶打開js關閉它打破設計，也許是有什麼simillar with php。 – ubo281 2012-02-11 15:30:05

儘管JavaScript是一種解決方案，但只有在解析HTML並且列可見後纔會執行。這將意味着頁面加載時出現「跳躍」。你應該儘量避免使用javascript來改變佈局，這可以在頁面加載之前完成。這裏唯一的好解決方案是有獨立的模板，或者至少是基於內容的類。 – Richard 2012-02-11 15:33:29

使用CSS來選擇使用EL空元素的兄弟姐妹嘗試：空（空元素）和el（一般兄弟姐妹）選擇器。

例如，此代碼設置3列布局，然後選擇空白左列的同胞並調整其寬度。

如果您對每一列類，會使其更容易，但是這是基本的想法：

.wrapper { 
    zoom: 1; 
    width: 90%; 
    height: 90%; 
    position: absolute; 
} 
.wrapper:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 
.column { 
    width: 32%; 
    height: 100%; 
    float: left; 
    margin: 0 0.66% 
} 
.column:empty { 
    width: 0%; 
    border: none; 
    margin: 0; 
} 
.column:empty ~ .column { 
    width: 48%; 
    margin: 0 0.98%; 
}

爲

標記

<div class="wrapper"> 
    <div class="column"><!--This needs to be completely empty for the solution to work --></div> 
    <div class="column"> 
     Content 
    </div> 
    <div class="column"> 
     Content 
    </div> 
</div>

要知道，如果你的空元素具有空格字符，它不會註冊爲空。例如：

<div class="column"> 
</div>

來源

2012-02-12 06:53:09 JuanOjeda

這是一個聰明的想法，但我發現joomla有它自己的php函數來計算模塊位置中的模塊，並根據它可以呈現沒有列的頁面並添加不同的css，但是這個想法對於非joomla項目非常有用，非常感謝！ – ubo281 2012-02-21 16:18:05

動態1-2-3列布局

回答

相關問題