在 Joomla 中现有的旁边添加模块答案

【问题标题】：Adding module next to existing in Joomla在 Joomla 中现有的旁边添加模块
【发布时间】：2014-10-06 23:09:57
【问题描述】：

在我的 Joomla 模板中当然是包含的组件：

<jdoc:include type="component" />

此时填充了父容器的整个宽度（带有边距）。父容器具有从站点顶部延伸到组件底部的背景。我想要做的是在组件之后添加一个位置以将模块放置在那里，但我希望它在组件旁边。

但是一旦我制作了组件float:left 并添加了width:80% 或其他东西，新位置上的模块就会浮动在组件旁边。但是，当我向组件添加 100% 以外的宽度并在组件开始之前停止时，父容器的背景会发生变化。

如何让组件的宽度小于 100% 和 float:left 旁边有另一个位置而不改变父容器的背景？

编辑：我想补充一点，我不能在父容器上使用overflow:hidden，因为如果我这样做，另一个元素将被剪裁。由于原始背景较宽，因此向组件和其他位置添加背景也不起作用。

Edit2：我找到了解决问题的方法。如果有人感兴趣，供将来参考：this 页面上的浮动清除部分描述了我的问题，并通过在最后一个浮动元素解决我的问题后添加 <div style="clear: both;"></div> 来清除浮动。如果有人有更清洁、更好的解决方案，我很乐意看到它！

【问题讨论】：

标签： joomla background position css-float components

【解决方案1】：

我不确定您使用的是哪个版本的 Joomla，但如果是 3.x，那么您可以使用 Bootstrap 附带的 clearfix 类。在父元素的末尾添加清晰的 div 是一种更清洁、更有效的方法。因此，只需将以下内容添加到您的父容器中：

class="clearfix"

如果您使用的是 Joomla 2.5，那么您可以将以下内容添加到您的模板 css 文件中：

.clearfix:before,
.clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

然后添加上面提到的类。

希望对你有帮助

【讨论】：

我正在使用 joomla 3，是的。但是删除 clear:both 元素并添加类 clearfix 仍然会导致问题。 Clear：两者都有效，但 clearfix 无效。