php - 将 div 彼此对齐

Question

如您所见，我在对齐 4 个 div 时遇到了一些问题:

出于某种原因，我无法让它们对齐。谁能告诉我怎么了？

html:

<?php foreach ($postslist as $post) : setup_postdata($post); ?>
        <div class="frontPost">
            <a href="<?php the_permalink();?>">

                    <div class="crop">
                        <img class="postImg" src="<?php the_field('frontimg')?>" alt="frontImg">
                    </div>
                    <p class="postTitle"> <?php the_title()?> </p>
                    <p class="postIntro"> <?php the_field('introduction') ?> </p>
            </a>
        </div>

<?php endforeach; ?>

CSS:

.crop {
width: 250px;
height: 150px;
overflow: hidden;
}

.frontPost{
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}

.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}

.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}

.postIntro{
text-align: left;
}

Answer 1

使用 vertical-align 属性怎么样。将下面的代码用于 css

.crop {
width: 250px;
height: 150px;
overflow: hidden;
}

.frontPost{
vertical-align:top;
width: 250px;
display: inline-block;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}

.bigTxt{
letter-spacing: 10px;
font-size: 16px;
}

.postTitle{
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
}

.postIntro{
text-align: left;
}

希望对你有帮助