我有包含成员信息的 div 框。我有浮动问题。一些盒子向右浮动,在左侧留下空白空间。
这是模板代码。
<?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>
<?php $loop = new WP_Query( array( 'post_type' => 'members', 'posts_per_page' => 100, 'order' => 'ASC' ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php do_atomic( 'before_entry' ); // origin_before_entry ?>
<div class="members">
<div class="members-avatar">
<?php echo(types_render_field("members-profile-picture", array("alt"=>"Members","width"=>"105","height"=>"135","proportional"=>"true"))); ?>
</div>
<div class="members-profile">
<div class="members-title">
<?php echo(types_render_field("members-first-name", array('raw' => 'true'))); ?> <?php echo(types_render_field("members-last-name", array('raw' => 'true'))); ?>
</div>
<div class="members-jobs">
<p><?php echo(types_render_field("members-jobs", array('raw' => 'true'))); ?></p>
</div>
<div class="members-location">
<?php echo(types_render_field("members-location", array('raw' => 'true'))); ?>
</div>
</div>
<div style="clear:both"></div>
</div>
<?php do_atomic( 'after_entry' ); // origin_after_entry ?>
<?php do_atomic( 'after_singular' ); // origin_after_singular ?>
<?php comments_template( '/comments.php', true ); // Loads the comments.php template. ?>
<?php endwhile; ?>
<div style="clear:left"></div>
CSS 代码:
.members {width: 330px; height: 100%; float:left; margin-right: 10px; margin-top: 20px; margin-bottom: 50px;}
.members-avatar {float: left; width: 115px;}
.members-profile {float: right; width: 210px;}
.members-title {color:#008250; font-weight: bold;}
.members-jobs {margin-top: 10px;}
.members-jobs p {text-align: left; font-size: 11px;}
.members-location {margin-top: 10px; font-style: italic;}