将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

您的CSS代码显示内联块的位置会将此规则添加到其中。

vertical-align:top;

输出：

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

这将使所有div在父div的顶部对齐。

阅读的有用链接！ - http://css-tricks.com/almanac/properties/v/vertical-align/

Answer 2

使用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;
}

希望这有助于你