3

私は現在、新しいTwenty Twelve Wordpress Web サイトから子テーマを作成する作業を行っています。このサイトには、応答性のために流動的/流動的な構造があります（ピクセル単位の固定幅ではなくパーセンテージを使用します-これは、ウィジェットのスタイルを設定する方法に関連する可能性があります）。

テンプレートの上部に、ユーザー/管理者が提供されたリストで使用可能なウィジェットからアイテムをドラッグ アンド ドロップできるウィジェット化された領域を含めたいと思います。

理想的には、このセクションのサイトのデザインとレイアウトは水平面上にあるため、3 つのウィジェットがスペースの観点から視覚的に見栄えがするでしょう。

ただし、ユーザーがさらに追加したい場合は、PHP または JavaScript を使用して、セクション タグ内に一定量の div/classes/id があるかどうかを計算する必要があると考えています。たとえば、CSS の幅を33.33% (3 ウィジェット) から 25% (4 ウィジェット) または 50% は 2 つなどです。

各ウィジェットの幅を均等に配置し、それらを隣り合わせに配置するにはどうすればよいでしょうか?

4

2 に答える 2

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>
于 2012-10-25T23:07:16.643 に答える
0

これは Bootstrap Grid View を使用して行うことができます。詳細については、こちら
をご覧ください。

理論的には、Bootstrap グリッドにはデフォルトで 12 列があります。
行に 3 列が必要な場合は、12 を 4
で割ります。これにより、行に 3 列が生成されます。Bootstrap Grid Link で例を見ることができます。

于 2016-01-29T12:47:11.283 に答える