0

<div id='widget-sidebar' class='widgets_on_page'>フォーラムのコンテンツの上にログインウィジェットがあるワードプレスページがあります。次のように、右にフロートさせて、フォーラムのタイトルを左に垂直に揃えたいと思います。

ここに画像の説明を入力してください

私が抱えている問題は、フォーラムのタイトルが動的に生成されるため、同じdivに配置できないことです。

何か案は？

ソースコードは次のとおりです。 

        <div id="primary">
            <div id="content" role="main">


                    <div id='widget-sidebar' class='widgets_on_page'>
    <ul><li id="wp_sidebarlogin-2" class="widget widget_wp_sidebarlogin"><h2 class="widgettitle">Welcome Admin</h2><div class="avatar_container"><img src="http://localhost/wordpress/wp-content/plugins/user-avatar/user-avatar-pic.php?src=http://localhost/wordpress/wp-content/uploads/avatars/1/1344255249-bpfull.jpg&#038;w=38&#038;id=1&#038;random=1344255249" alt="" class=" avatar  avatar-38  photo user-1-avatar" width="38" height="38" /></div><ul class="pagenav"><li class="page_item"><a href="http://localhost/wordpress/wp-admin/">Dashboard</a></li><li class="page_item"><a href="http://localhost/wordpress/wp-admin/profile.php">Profile</a></li><li class="page_item"><a href=" http://localhost/wordpress/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Flocalhost%2Fwordpress%2F%3Fforum%3Dna-forum&amp;_wpnonce=caf8874286">Logout</a></li></ul></li></ul>
  </div><!-- widgets_on_page -->

    <article id="post-2901" class="post-2901 forum type-forum status-publish hentry">
        <header class="entry-header">
                        <h1 class="entry-title"><a href="http://localhost/wordpress/?forum=na-forum" title="Permalink to NA Forum" rel="bookmark">NA Forum</a></h1>


                    </header><!-- .entry-header -->

これが私が取り組んでいる私のフォーラムページテンプレートの一部です：

        <div id="primary">
            <div id="content" role="main">

            <?php widgets_on_template("widget-sidebar"); ?>

            <?php if ( have_posts() ) : ?>

                <?php twentyeleven_content_nav( 'nav-above' ); ?>

                <?php /* Start the Loop */ ?>
                <?php while ( have_posts() ) : the_post(); ?>

                    <?php get_template_part( 'content', get_post_format() ); ?>

                <?php endwhile; ?>

                <?php twentyeleven_content_nav( 'nav-below' ); ?>
4

2 に答える 2

0

ウィジェットに絶対位置を使用すると機能するはずです。何かのようなもの：

div#content {
    position: relative;
}

div#widget-sidebar {
    position: absolute;
    top: 10px;
    right: 10px;
}
于 2012-08-08T11:01:12.683 に答える
0

IE7を気にしない場合は、を使用してコンテナを垂直に配置できますdisplay: table-cell;。これはテーブルとしてレンダリングされるため、フロートする機能が失われます。したがって、少なくとも1つの要素に明示的に幅を設定する必要があります。

CSS

div {
    display:        table-cell;
    vertical-align: middle;
}

div:first-child {
    width:      80%;
}

HTML

<div>
    first line<br>
    second line<br>
    last line
</div>

<div>
    just one line<br>
</div>

フィドル

http://jsfiddle.net/y96hb/

于 2012-08-08T10:12:25.080 に答える