[英]How do I align two objects vertically that aren't in the same div
我在论坛内容上方有一个带登录小部件<div id='widget-sidebar' class='widgets_on_page'>
的wordpress页面。 我想将其浮动到右侧,并使论坛标题在左侧垂直对齐,如下所示:
我遇到的问题是论坛标题是动态生成的,因此无法将它们放在同一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&w=38&id=1&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&redirect_to=http%3A%2F%2Flocalhost%2Fwordpress%2F%3Fforum%3Dna-forum&_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' ); ?>
如果您不关心IE7,则可以使用display: table-cell;
垂直对齐容器display: table-cell;
。 由于将其呈现为表格,因此失去了浮动的能力。 因此,您必须在至少一个元素上明确设置宽度。
div {
display: table-cell;
vertical-align: middle;
}
div:first-child {
width: 80%;
}
<div>
first line<br>
second line<br>
last line
</div>
<div>
just one line<br>
</div>
为小部件使用绝对定位应该可以。 就像是:
div#content {
position: relative;
}
div#widget-sidebar {
position: absolute;
top: 10px;
right: 10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.