php - 图像高度不适用于 php 循环

Question

这是管理循环中每个元素外观的 div:

<div style="float:left;width:30%;padding:30px;height:auto;">
    <img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
    <h3>
        <?php echo $r['name']; ?>
    </h3>
    <div class="position">
        <?php echo $r['position']; ?>
    </div>
    <?php echo $r['intro_text']; ?>
    <?php if ($r['learn_more_text']) { ?>
        <a href="#" class="button" data-reveal-id="<?php echo sanitize_title($r['name']); ?>">Learn More</a>
    <?php } ?>
    <?php if ($r['learn_more_text']) { ?>
        <div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

            <h3><?php echo $r['name']; ?></h3>
            <div class="position">
                <?php echo $r['position']; ?>
            </div>
            <div class="content">       
                <?php echo $r['learn_more_text']; ?>
            </div>
            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>
    </div>

如果我将高度设置为固定数字(例如:450x)，图像将排成一行。但这将使页面非移动响应。如果我将高度设置为自动或 30% 之类的百分比，图像会变为移动响应，但它们不会对齐。我得到 2 张分成不同行的图像。

另外，我得到了 2 个图像部分。一个叫做我们的领导，另一个叫做我们的团队。底部的部分正确对齐并包含在一个 div 中。它上面的 div 拒绝包含在 div 中。如果我将它包装在一个 div 中，只有第一个元素将自己包装在 div 中。我不知道为什么。

例如:

<center>
    <div>
        <div>first item here</div>
    </div>
    <div>second item here</div>
    <div>third item here</div>
    <div>fourth item here</div>


    Here's the complete code for both sections:

    <center><h2>Our Leadership</h2></center>
    <center><div>
            <?php
            $people = get_field('people');
            $a = 0;
            foreach ($people as $r) {
                $a++;
                ?>
                <div style="float:left;width:30%;padding:30px;height:auto;">
                    <img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
                    <h3>
                        <?php echo $r['name']; ?>
                    </h3>
                    <div class="position">
                        <?php echo $r['position']; ?>
                    </div>
                    <?php echo $r['intro_text']; ?>
                    <?php if ($r['learn_more_text']) { ?>
                        <a href="#" class="button" data-reveal-id="<?php echo sanitize_title($r['name']); ?>">Learn More</a>
                    <?php } ?>
                    <?php if ($r['learn_more_text']) { ?>
                        <div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

                            <h3><?php echo $r['name']; ?></h3>
                            <div class="position">
                                <?php echo $r['position']; ?>
                            </div>
                            <div class="content">       
                                <?php echo $r['learn_more_text']; ?>
                            </div>
                            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
                        </div>
                    </div>
                <?php } ?>
            </div>
        <?php } ?>
        </div></center>
    <div style="clear:both;"></div>


    <center><h2>Our Team</h2></center>
    <center><div>
            <?php
            $people2 = get_field('people_bottomsection');
            $a = 0;
            foreach ($people2 as $r) {
                $a++;
                ?>
                <div style="float:left;width:30%;padding:30px;height:auto;">
                    <img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
                    <h3>
                        <?php echo $r['name']; ?>
                    </h3>
                    <div class="position">
                        <?php echo $r['position']; ?>
                    </div>
                    <?php echo $r['intro_text']; ?>
                    <?php if ($r['learn_more_text']) { ?>
                        <a href="#" class="button" data-reveal-id="<?php echo sanitize_title($r['name']); ?>">Learn More</a>
                    <?php } ?>
                    <?php if ($r['learn_more_text']) { ?>
                        <div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

                            <h3><?php echo $r['name']; ?></h3>
                            <div class="position">
                                <?php echo $r['position']; ?>
                            </div>
                            <div class="content">       
                                <?php echo $r['learn_more_text']; ?>
                            </div>
                            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
                        </div>
                    </div>
                <?php } ?>
            </div>
        <?php } ?>
    </div></center>
<div style="clear:both;"></div>

Check out the source code at: http://www.equitasmg.com/who-we-are-2/

Answer 1

这是因为循环中的元素具有不同的高度。因此，尝试为循环中的每个元素添加一个恒定高度。

例如:

 <div style="float:left;width:30%;padding:30px;min-height:550px;"></div>