0

だから私はウィジェット化されたものをフロントページに作成しようとしています。そのために次のコードを使用しています:

<div id="widgets" class="container_24">
    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('frontpage_widget')) : else : ?>  
        <h4>Widget Ready</h4>  
        <p>This frontpage_widget is widget ready! Add one in the admin panel.</p>  
    <?php endif; ?>
    </div>

ウィジェット自体は次のコードを取得しました。

register_sidebar(array(
        'name' => 'Frontpage Widget',
        'id'   => 'frontpage_widget',
        'description'   => 'Widget area for frontpage',
        'before_widget' => '<div id="%1$s" class="fp_widget roundedCorners %2$s grid_6">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2><hr />'
    ));

その領域に4つのウィジェットを配置すると、すべて問題なく表示されますが、ウィジェットが3つしかない場合は中央に配置されません..

以下のcssを追加して余分なdivを追加しようとしましたが、それもあまり効果がないようです。

margin-left:auto;margin-right:auto;

誰が私が間違っているのか分かりますか?

4

2 に答える 2

1

それらは最初から中央に配置されることを意図したものではありません - float プロパティは要素を左から右に配置し、コンテナーの幅を超えるまで (左から右に) コンテナー全体の幅を埋め、次の要素に続きます。ライン。したがって、すべての要素は左に向かってフラッシュされ、中央には配置されません。

display: inline-blockつまり、フロート要素を設定(およびフロートを削除)text-align: centerしてから親要素を設定しない限り、フロート要素を中央に配置することはできません。各インライン ブロック要素間に空白が存在する問題を軽減するには、親コンテナーのフォント サイズを 0 に設定し、子コンテナーで目的のフォント サイズを再宣言します。

.container {
    background-color: #eee;
    text-align: center;
    font-size: 0; /* To remove space between inline-block elements */
    width: 100%; /* or 960px, or any other value you desire */
}
.widget {
    background-color: #aaa;
    display: inline-block;
    width: 25%;
    font-size: 16px; /* Reset font size in widgets */
}

HTML:

<div class="container">
    <div class="widget">Widget 1</div>
    <div class="widget">Widget 2</div>
    <div class="widget">Widget 3</div>
</div>

ここでフィドルを参照してください - http://jsfiddle.net/SzsuN/

于 2013-03-09T15:50:02.297 に答える
1

960 グリッド システムの仕組みでは、すべてがデフォルトで左または右に配置されます。これは、float: leftステートメント (およびfloat: right右から左の国) によるものです。ウィジェットを中央に配置するには、ウィジェットを grid_8 にするか、コンテナー自体を狭くして収容する必要があります。

ウィジェットの数を渡し、それぞれがレスポンシブに設計されている場合、次のようにすることができます。

'before_widget' => '<div id="%1$s" class="fp_widget roundedCorners %2$s grid_'. (24 / $widget_count) .'">',

編集：

3 つのウィジェットを 1 つのウィジェットの幅の半分 (中央揃え) だけ右にシフトするには、クラスpush_3を最初のウィジェットに追加します。これにより、要素の左側に 240 ピクセルのパディングが追加され、中央に表示されます。

于 2013-03-09T14:57:48.390 に答える