Question

我正在寻找如何创建动态3列布局的解决方案，但如果左列是emtpy，则内容和右列将是widder。就像在joomla模板中一样，如果你没有将任何模块放在左侧位置，它将会扩展。

Answer 1

尝试使用css使用el：empty（空元素）和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>

Answer 2

您需要使用将根据页面内容显示的单独页面模板，或者您可以在使用javascript加载页面后执行此操作，但我不建议这样做。我确定如果列是空的，Joomla将显示不同的模板。

拥有“动态”列宽的另一个选项是使用表格，但你不想去那里： - ）

动态1-2-3列布局

2 个答案: