水平样式化​​WordPress小部件

我目前正在从新的”Twenty Twelve WordPress”网站上整理一个子主题。该网站因其响应能力而具有流体/液体结构(使用百分比而不是固定的像素宽度-这与我可能必须设计小部件样式有关)。

在我的模板的顶部, 我想包括一个小部件化的区域, 用户/管理员可以在其中从提供的列表中的可用小部件中拖放项目。

理想情况下, 由于此部分站点的设计和布局是在水平面上, 所以三个小​​部件在空间上看起来都不错。

但是, 如果用户想添加更多内容, 我认为我需要使用PHP或JavaScript来计算section标签中是否存在一定数量的div / class / id, 例如, 将CSS宽度从33.33％(3个小部件)到25％(4个小部件)或50％是否有两个等？

我如何能够为每个小部件容纳相等间距的宽度并将它们彼此相邻放置？

#1

有点混乱, 但这是一个开始：

<?php
$widgets = wp_get_sidebars_widgets();
$percentage = !empty($widgets['header-widget-area']) ? floor(100/count($widgets['header-widget-area'])) : 100;
?>
<style type="text/css">
hgroup .widget{
    width:<?php echo $percentage; ?>% !important;
    float:left;
}
</style>

#2

这可以使用Bootstrap Grid View完成。

完整的细节可以在这里找到。

理论上, Bootstrap网格默认情况下有12列。

如果要连续3列, 则将12除以4。

它将连续产生3列。你可以在Bootstrap Grid Link上看到示例。