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个分成不同行的图像。

另外，我有两段图像。一个叫做我们的领导，另一个叫我们的团队。底部的部分正确对齐并包含在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

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

例如：

＆＃13;

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

＆＃13;

图像高度不适用于php循环

1 个答案: