CSS Float 问题 - 自定义帖子存档页面

Question

我有一个包含成员信息的 div 框。我有 float 问题。一些盒子向右浮动，在左侧留下空白空间。

这是模板代码。

<?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;}

Answer 1

感谢大家的意见。我通过在 .members 类中将 height: 100%; 更改为 height: 250px; 来修复它。这不是 float 的问题。