动态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列布局

回答

相关问题